寫了一個多月JS，感覺如今可不比幾年前只有IE6的年代，而且過去只是用JS寫個Ajax或者是簡單的表單驗證，可如今寫一個稍微復雜點的小應用，要兼容所有瀏覽器，才發現真是太難了，難怪FE是一個獨立的工種，有別于我們這些Java工程師了。

　　如果你也不是專業FE，那么估計也會跟我一樣在這些地方翻船，或許你所遇到的情況比我這些還多，那么歡迎補充。

　　1 首先是最簡單的select標簽，就有諸多不兼容：

　　A、 cloneNode方法，對于非IE瀏覽器沒有問題，對于IE瀏覽器，我遇到的問題包括：

　　1)option selected的會clone不過去，然后會將第一個option作為selected值

　　2)事件clone也會有問題

　　B、Readonly：對于IE6，可以通過以下方法將select設為readonly：

　　obj.onbeforeactive=function(){return false}

　　obj.onfocus=function(){obj.blur();}

　　obj.onmouseover=function(){obj.setCapture();}

　　obj.onmouseout=function(){obj.releaseCapture();}

　　對于其他瀏覽器，我采用的是元素替代法，動態創建一個input標簽，把值賦給它，然后將select隱藏。

　　C、select的z-index對于IE6無效，網上有很多關于這個討論，JQuery采用一個iframe搞定

　　D、動態添加option的方法不同，這個網上一搜一大堆

　　E、對于onclick和onchange的響應不同，在FF下可以在onclick select時動態讀取option值然后構建option，然后選中一個值后執行onchange事件，但是IE下不能這樣做。

　　2 css對offsetWidth之類的理解不同

　　http://newleague.iteye.com/blog/765535

　　3 對于vertical-align baseline的理解不同：

　　http://w3help.org/zh-cn/causes/RD1016

　　4 設置背景色

　　element.style.backgroundColor

　　在firefox下想改變顏色，必須先設為null，再設為其他顏色才行，即先取消原來的顏色。

　　在IE下，想取消顏色，必須設為''才行，而換其他顏色，無需先去掉之前的顏色，而如果你設成了null，反倒不行了。

　　5 不同瀏覽器去padding的理解不同

　　6 不同瀏覽器對強制換行和強制不換行的理解不同：

　　http://www.cftea.com/c/2009/01/QPDZU40MNW8FYYG3.asp

　　最惡心的是對于IE6，如果是我是蚊子，那么在td上寫了word-break：keep-all依然無效，必須在span上也寫。

　　7 獲得head節點的方式不同

　　在Firefox下可以用window.head，而所有瀏覽器都兼容的方式是document.getElementsByTagName('head')[0]

　　8 往head上添加css code的方法不同，也就是動態添加

32 還有一個特悲劇的，IE下會把document.[formname.]控件Id當成那個控件，如果把一個控件比如input的id設為了submit，那么form.submit()就會報錯。
    
    至于用不用var的區別，undefined和null的區別，Ajax構建的不同方式，這些一般的Java程序員都了解了。

    很多Java程序員也會使用JS框架，比如JQuery，Extjs和Dojo，她們都幫我們屏蔽了很多兼容性問題。
    Dojo提供了Java一樣的面向對象機制。

    拋磚引玉，你還遇到過什么陷阱，那些FE都知道，而我們Java工程師不知道？

 

    有同學要求例子，有些只是小知識，有了鏈接，那么給一個我做的過程中寫的實驗程序吧，主要是驗證select，還有readonly之后的input對于keypress等事件的響應：

    <html>

Html代碼
以下是代碼片段：
<head> 
<script> 
function addListener(element,e,fn){ 
if(element.addEventListener){ 
element.addEventListener(e,fn,false); 
} else { 
element.attachEvent("on" + e,fn); 
} 
} 

function getEventSource(event){ 
event = window.event?window.event:event; 
var source = event.target || event.srcElement; 
return source; 
} 


function init(e){ 
var provChoice= document.getElementById('prov'); 
fillPro(provChoice); 
addListener(provChoice,'change',fillCity); 
var coChoice= document.getElementById('country'); 
addListener(coChoice,'change',function(){alert('a');}); 
var selects=document.getElementsByTagName('select'); 
for(var i=0;i<selects.length;i++){ 
selects[i].cloneNode=function(deep){ 
var temp=document.createElement('div'); 
temp.innerHTML=this.outerHTML; 
return temp.childNodes[0]; 
} 


} 

document.getElementById('cloneCo').appendChild(coChoice.cloneNode(true)); 
var coTD= document.getElementById('co'); 
document.getElementById('r1').appendChild(coTD.cloneNode(true)); 

document.getElementById('abc').readOnly=true; 
document.getElementById('abc').onkeydown=function(e){ 
e.preventDefault(); 
e.stopPropagation(); 
} 

document.getElementById('abc').onkeypress=function(e){ 
alert('b'); 
} 

document.getElementById('abc').onchange=function(e){ 
alert('c'); 
} 

document.getElementById('abc').onblur=function(e){ 
alert('d'); 
document.getElementById('abc').value='add'; 
} 
} 

function fillPro(pro){ 
pro.options[0]=new Option('BJ','北京'); 
pro.options[1]=new Option('TJ','天津'); 
pro.options[2]=new Option('HLJ','黑龍江'); 
pro.options[3]=new Option('SH','上海'); 
} 

function fillCity(e){ 
var c= document.getElementById('city'); 
if( document.getElementById('prov').value=='黑龍江'){ 
c.options[0]=new Option('HRB','哈爾濱'); 
c.options[1]=new Option('MDJ','牡丹江'); 
c.options[2]=new Option('QQHR','齊齊哈爾'); 
c.options[3]=new Option('JMS','佳木斯'); 
} 


} 

</script> 
</head> 
<body onload='init(event)'> 
<table> 
<tr id='r1'> 
<td id='co'> 
<select id='country' name='country'> 
<option value='UK'>UK</option> 
<option value='USA'>USA</option> 
<option value='CHINA' selected>China</option> 
</select> 
</td> 
<td> 
<select id='prov' name='prov'></select> 
</td> 
<td> 
<select id='city' name='city'></select> 
</td> 
<td id='cloneCo'></td> 
<td> 
<input id='abc' value='0' onkeypress='return alert("a1"); '/> 
</td> 
<tr> 
<table> 

</body> 
</html>