HTML

同一个网页在不同浏览器中显示的效果不一样,这是因为不同浏览器对网页代码的解释不一样,特别是css样式方面,这就是浏览器兼容性问题。

为了解决流浪器兼容问题,程序员需要针对各种浏览器存在的“bug”编写相应的css代码,这种代码也称作CSS hack。

首先介绍一下主流浏览器的css hack方法:

 浏览器     特殊符号       符号位置                

Firefox        无             无

IE8.0         \0        语句后、分号前

IE7.0          *           语句前

IE6.0         _或+         语句前

各浏览器css代码书写顺序为先写Firefox再写IE8.0再写IE7.0再写IE6.0,对css代码的识别以最后一次为准

下面介绍几种常见的浏览器兼容性问题及解决办法:

(1)三像素文本慢移问题

     问题:IE6.0中,在浮动(float)元素后紧跟一个行内元素,两者之间会有3px的间隙

     解决方案:在相应的行内元素css中加入_margin-left:-3px;

(2)双边距bug

     问题:IE6.0中,如果元素浮动方向与margin一致,则会出现双边距bug

     解决方案:在浮动元素的css中加入_display:inline;

(3)不同浏览器默认边距不一致问题

     问题:ul、ol、dl、dt、dd等标签在IE与Firefox中的内外边距不一致问题

     解决方案:可以在css代码开头加上*{margin:0px;padding:0px;}

(4)其他兼容性问题

     解决方案:具体问题具体分析

先总结到这,以后发现经典问题再来补充!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。