寫(xiě)了一個(gè)多月JS，感覺(jué)如今可不比幾年前只有IE6的年代，而且過(guò)去只是用JS寫(xiě)個(gè)Ajax或者是簡(jiǎn)單的表單驗(yàn)證，可如今寫(xiě)一個(gè)稍微復(fù)雜點(diǎn)的小應(yīng)用，要兼容所有瀏覽器，才發(fā)現(xiàn)真是太難了，難怪FE是一個(gè)獨(dú)立的工種，有別于我們這些Java工程師了。

　　如果你也不是專(zhuān)業(yè)FE，那么估計(jì)也會(huì)跟我一樣在這些地方翻船，或許你所遇到的情況比我這些還多，那么歡迎補(bǔ)充。

　　1 首先是最簡(jiǎn)單的select標(biāo)簽，就有諸多不兼容：

　　A、 cloneNode方法，對(duì)于非IE瀏覽器沒(méi)有問(wèn)題，對(duì)于IE瀏覽器，我遇到的問(wèn)題包括：

　　1)option selected的會(huì)clone不過(guò)去，然后會(huì)將第一個(gè)option作為selected值

　　2)事件clone也會(huì)有問(wèn)題

　　B、Readonly：對(duì)于IE6，可以通過(guò)以下方法將select設(shè)為readonly：

　　obj.onbeforeactive=function(){return false}

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

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

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

　　對(duì)于其他瀏覽器，我采用的是元素替代法，動(dòng)態(tài)創(chuàng)建一個(gè)input標(biāo)簽，把值賦給它，然后將select隱藏。

　　C、select的z-index對(duì)于IE6無(wú)效，網(wǎng)上有很多關(guān)于這個(gè)討論，JQuery采用一個(gè)iframe搞定

　　D、動(dòng)態(tài)添加option的方法不同，這個(gè)網(wǎng)上一搜一大堆

　　E、對(duì)于onclick和onchange的響應(yīng)不同，在FF下可以在onclick select時(shí)動(dòng)態(tài)讀取option值然后構(gòu)建option，然后選中一個(gè)值后執(zhí)行onchange事件，但是IE下不能這樣做。

　　2 css對(duì)offsetWidth之類(lèi)的理解不同

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

　　3 對(duì)于vertical-align baseline的理解不同：

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

　　4 設(shè)置背景色

　　element.style.backgroundColor

　　在firefox下想改變顏色，必須先設(shè)為null，再設(shè)為其他顏色才行，即先取消原來(lái)的顏色。

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

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

　　6 不同瀏覽器對(duì)強(qiáng)制換行和強(qiáng)制不換行的理解不同：

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

　　最?lèi)盒牡氖菍?duì)于IE6，如果是我是蚊子，那么在td上寫(xiě)了word-break：keep-all依然無(wú)效，必須在span上也寫(xiě)。

　　7 獲得head節(jié)點(diǎn)的方式不同

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

　　8 往head上添加css code的方法不同，也就是動(dòng)態(tài)添加

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

    很多Java程序員也會(huì)使用JS框架，比如JQuery，Extjs和Dojo，她們都幫我們屏蔽了很多兼容性問(wèn)題。
    Dojo提供了Java一樣的面向?qū)ο髾C(jī)制。

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

 

    有同學(xué)要求例子，有些只是小知識(shí)，有了鏈接，那么給一個(gè)我做的過(guò)程中寫(xiě)的實(shí)驗(yàn)程序吧，主要是驗(yàn)證select，還有readonly之后的input對(duì)于keypress等事件的響應(yīng)：

    <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>