现在的位置: 首页 > 综合 > 正文

Javascript兼容性问题小结(容易导致浏览器不同,又不容易察觉的)

2012年10月21日 ⁄ 综合 ⁄ 共 2366字 ⁄ 字号 评论关闭

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";
方法 三,先判断浏览器类型,再根据浏览器类型采用对应的写法。

抱歉!评论已关闭.