pc常见端兼容性问题

pc常见端兼容性问题

1、IE8 下面的 png 图片无法正常显示？

原因：打开调试面板，你会发现 IE8 浏览器把 PNG 格式的 img 解析成了 span 标签，导致图无法显
示。
解决方案：在样式里面对 span 设置宽高和 display:inline-block;即可。

2、rgba 不支持 IE8？

解决方案:可以用 opacity
opacity:0.7;/FF chrome safari opera/
filter:alpha(opacity:70);/用了 ie 滤镜,可以兼容 ie/
但是,需要注意的是,opacity 会影响里面元素的透明度

3、C3 的新属性？

当一些 CSS3 样式语法还存在波动时，它们提供针对浏览器的前缀。现在主要流行的浏览器内核主
要有：
Trident 内核：主要代表为 IE 浏览器
Gecko 内核：主要代表为 Firefox
Presto 内核：主要代表为 Opera
Webkit 内核：产要代表为 Chrome 和 Safari
而这些不同内核的浏览器，CSS3 属性（部分需要添加前缀的属性）对应需要添加不同的前缀，也将
其称之为浏览器的私有前缀，添加上私有前缀之后的 CSS3 属性可以说是对应浏览器的私有属性：
Trident 内核：前缀为-ms
Gecko 内核：前缀为-moz
Presto 内核：前缀为-o
Webkit 内核：前缀为-webkit

4、集合类对象问题

问题：
代码中许多集合类对象取用时使用()，IE 能接受，FF 不能
解决方法：
改用 [] 作为下标运算，例：
document.getElementsByName(“inputName”)(1) 改 为
document.getElementsByName(“inputName”)[1]

5、window.event

问题：使用 window.event 无法在 FF 上运行
解决方法：
FF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通
解决：
onMouseMove = “functionName(event)”
function functionName (e) {
e = e || window.event;
…
}

6、HTML 对象的 id 作为对象名的问题

问题：在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用，在 FF 中不能
解决方法：
使用对象变量时全部用标准的 getElementById(“idName”)

7、 取得元素的属性

在 FF 中，自己定义的属性必须 getAttribute() 取得

在 FF 中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes

问题：
childNodes 的下标的含义在 IE 和 FF 中不同，FF 的 childNodes 中会插入空白文本节点
解决方法：
可以通过 node.getElementsByTagName_r() 来回避这个问题
问题：
当 html 中节点缺失时，IE 和 FF 对 parentNode 的解释不同，例如：
FF 中 input.parentNode 的值为 form，而 IE 中 input.parentNode 的值为空节点
问题：
FF 中节点自己没有 removeNode 方法
解决方法：
必须使用如下方法 node.parentNode.removeChild(node)

8、捕获事件

问题：火狐(FF)没有setCapture(),releaseCapture()方法

解决方法：
IE：obj.setCapture();
obj.releaseCapture()
FF：
window.captureEvents(Event.MouseMove|Event.MoouseUp);
window.releaseEvents(Event.MouseMove|Event.MouseUp)