常见的浏览器兼容性问题和解决方法
- png24 位的图片在IE6 浏览器上出现背景。
解决方案:将图片做成png8 位。
- 浏览器默认的margin 和padding 不同 。
解决方案:加一个全局的{margin:0;padding:0;}
来统一margin 和padding。
- IE6 双边距 bug:块属性标签 float 后,又有横行的margin 情况下,在 IE6 显示的margin 比设置的大。
浮动IE 产生的双倍距离(IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。)
解决方案:在float的标签样式控制中加入——_display:inline;
将其转化为行内属性。(_这个符号只有ie6会识别)
- IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()
获取自定义属性。
- IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
- Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示。
解决方法:可通过加入 CSS 属性-webkit-text-size-adjust: none;
解决。
- 超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不在具有hover和active了。
解决方法:改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
- 怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式。
为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。现在可以使用[html5]推荐的写法:<doctype html>
常用 hack 技巧
渐进识别的方式,从总体中逐渐排除局部。
.bb{
background-color:#f1ee18; /*所有识别*/
.background-color:#00deff\9; /*IE6、7、8 识别*/
+background-color:#a200ff; /*IE6、7 识别*/
_background-color:#1e0bd1; /*IE6 识别*/
}
各浏览器常用兼容标记一览表:
![](https://img.haomeiwen.com/i19669663/1e2273f4f34ec4bd.png)
网友评论