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)其他兼容性问题
解决方案:具体问题具体分析
先总结到这,以后发现经典问题再来补充!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。