写了一个多月JavaScript，感觉如今可不比几年前只有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><span>我是蚊子</span></td>，那么在td上写了word-break：keep-all依然无效，必须在span上也写。

　　7、获得head节点的方式不同

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

　　8、往head上添加css code的方法不同，也就是动态添加<style>标签。

　　IE下可以用var style=document.createStyleSheet();style.cssText=cssCode;

　　而有文章说，在Windows上的IE，用createStyleSheet返回的是styleElement的styleSheet，而在Mac上返回的是styleElement自己。

　　在其他浏览器下需要document.createElement('style');

　　然后还有区分是否具有styleSheet属性。

　　这个很容易搜到。

　　9、对于onchange事件，firefox浏览器可以注册在table，div等组件上，然后通过冒泡，拦截input，select等发出的事件，而IE不行，必须绑定到相应的组件上

　　10、将input设为readonly=true，其依然会响应keypress，keyup，keydown，onblur事件