Javascript兼容性问题小结(容易导致浏览器不同，又不容易察觉的)
1. img的src刷新问题
【分析说明】先看一下代码：
<img id="pic" onclick= "this.src= 'a.jpg'"
src="aa.jpg" style="cursor: pointer"/>
在IE 下，这段代码可以用来刷新图片，但在FireFox下不行。主要是缓存问题。
【兼容处理】在地址后面加个随机数就解决了:
<img id="pic" onclick= "javascript:this.src=this.src+'?'
+Math.random()"src="a.jpg" style="cursor: pointer"/>
2.nodeName 和 tagName 问题
在Firefox中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。
在 IE中nodeName 的使用有时会有问题。
解决方法：
使用 tagName，但应检测其是否为空。
3.布局问题
当 你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。
其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就 是说一个div结束后要紧 接着一个div写，中间不要有回车或者
空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。
非常不走 运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了
3px。我把标签之间的空格都删除都没有作用。
后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。
这只是一些简单的区 别,在做布局和CSS设计时候可以综合考虑,但最为有效与简单的解决兼容问题还是用TABLE表格,表格在兼容性方面有着不错 的表现.
4.padding、margin
padding 和margin值尽量不要缩写。最近看了一两篇文章，居然说有可能不兼容，其实我自己从来没有遇到它们
不兼容的情况，以防万一，还是尽量不缩写好了。
5. 键盘值的取得
【分析说明】IE和Firefox获取键盘值的方法不同，可以理 解，Firefox下的event.which与IE下的 event.keyCode相当。关于彼此不同，可参考《键盘事件中 keyCode、which和
charCode 的兼容性测试》
【兼容处理】
function myKeyPress(evt){
//兼容IE和Firefox获得keyBoardEvent对象
evt = (evt) ? evt : ((window.event) ? window.event : "")
//兼容IE和Firefox获得 keyBoardEvent对象的键值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
//同时按下了Ctrl和回车键
//do something;
}
}
6. Firefox不能对innerText支持
【分析说明】Firefox不支持innerText，它支持textContent来实现 innerText，不过textContent没有像 innerText一样考虑元素的display方式，所以不完全与IE兼容。如果不用
textContent，字符串里面不包含HTML代码也可以用 innerHTML代替。也可以用js写个方法实现，可参考《为firefox实现innerText属性》一文。
【兼容处理】通过判断浏览器类型来兼容：
if(document.all){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
7.访问和设置class属性
【分析说明】同样由于class是Javascript保留字的原因，这两种浏览器使用不同的 JavaScript 方法来获取这个属性。
IE8.0之前的所有IE版本的写法：
myObject.getAttribute("className");
而IE8.0 以及 firefox的写法：
myObject.getAttribute("class");
另外，在使用setAttribute()设置Class属性的时候，两种浏览器也存在同样的差异。
setAttribute("className",value);
这种写法适用于IE8.0之前的所有IE版本，注意：IE8.0也 不支持"className"属性了。
setAttribute("class",value);适用于IE8.0 以及 firefox。
【兼容处理】
方法一，两种都写上：
var myObject = document.getElementById("header");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
//设置header的class为 classValue
方法二，IE和FF都支持object.className，所以可以这样写：
myObject.className="classValue";
方法 三，先判断浏览器类型，再根据浏览器类型采用对应的写法。
