微信ID：WEB_uwysj（点击查看）◎◎◎◎一┳
（底部页面信息已打开，欢迎投诉）
●●●
浏览器兼容性问题是指由于不同浏览器对同一CSS代码的不同解析，导致页面显示效果不一致的情况。总的来说，我们希望无论用户使用什么浏览器来查看网页，效果都应该是一样的。浏览器兼容性是web前端开发人员经常遇到的问题，必须加以解决。现在，PHP程序员和雷雪松已经整理出了历史上最完整的浏览器兼容性问题和解决方案。
1、浏览器兼容性问题摘要
1.双浮动保证金：
原因：多个平行浮动元件设置了左或右边界值（x），IE6下第一个浮动元件的左或右边界值为2倍（2x）；
解决方案：为第一个浮动元素添加display:inline；风格
2.高度不适应：
原因：无法扩展多个平行浮动元素的父级高度。
解决方案：添加<；在最后一个浮动元素之后；divclass=“clear”>；<；/div>。清除{clear:两个；}
3.无法识别上下边界：
原因：父元素未指定高度，页边距顶部和页边距底部解析错误
解决方案：在该元素的父元素上添加样式：溢出：自动；显示：内联块；
注意：当元素设置为内联块时，最后指定元素的宽度；
4.IE6不识别微高度：
原因：IE6无法识别低于当前单词高度的高度
解决方案：为此元素设置字体大小：0/溢出：隐藏；
5.IE6链路伪类问题：
原因：IE6不承认P:JetLi，但只承认a:JetLi
解决方案：换成a：hover。
6.IE6和IE7阶梯列表问题：
原因：浮动元素没有指定宽度；
解决方案：为浮动图元指定固定宽度
2、兼容（黑客）技术
1.属性过滤：
1 2 3 4 5 | #导航{ _利润率：100px；/*仅限IE6*/ *利润率：100px；/*只有IE6和IE7得到认可*/ 保证金：100px0/；/*仅限IE8*/ } |
2.选择器筛选：
1 2 3 4 5 6 7
8 9 10 | *html#nav{margin:10px；border:1px#f00solid；}/*仅限IE6识别*/ *+html#nav{margin:100px；border:1px#f00solid；}/*仅限IE7识别*/ /*对于Firefox*/ @-moz文档url前缀{ #导航{宽度：200px；} } /*用于Safari&；铬*/ @媒体屏幕和（-WebKitmin设备像素比：0）{ #导航{宽度：300px；} } |
注：对于chrome中文版中12以下无法识别的字体大小，解决方案是按如下方式设置字体：
1 2 3 4 5 | html{-webkit文本大小调整：无；} /*歌剧*/ @媒体全部和（-WebKitmin设备像素比：10000），非全部和（-WebKitmin设备像素比：0）{ #导航{宽度：400px；} } |
3.样式表过滤
1 2 3 4 5 6 | <；！——[如果ie6]>；只有IE6能识别HTML<；！[endif]——>； <；！——[如果低于ie6]>；少于IE6可识别的HTML<；！[endif]——>； <；！——[如果超过ie6]>；超过IE6认可的HTML<；！[endif]——>； <；！——[如果ie]>；只有ie能识别HTML<；！[endif]——>； <；！——[如果lteie6]>；小于或等于IE6公认的HTML<；！[endif]——>； <；！——[如果gteie6]>；大于或等于IE6公认的HTML<；！[endif]——>； |
3、预防措施
记得清除浮子。（在带有浮子元件的容器底部添加透明浮子）
尽量给浮动元素一个确定的宽度。
尝试使用填充而不是边距。
如果同时存在浮动和边距，则添加display:inline。
尽量避免使用绝对定位进行布局；如果使用，请指定Z索引、顶部和左侧；
尽量避免使用半透明的PNG图片（PNG-24）；如果使用，请使用PNG补丁修复；
如果宽度被拉伸，则设置溢出：隐藏；
如果出现无法解释的填充，请设置字体大小：0，溢出：隐藏；
4、其他技能
1.在FF下为div设置填充将增加宽度和高度，但ie不会（可通过！重要提示解决）
2.定心问题
a）。垂直居中将线条高度设置为与当前div相同的高度，然后使用“垂直对齐：中间”（注意不要将内容环绕）
b）。中心水平边距：0自动；（当然不是全部）
3.如果需要为标签内容添加样式，则需要设置display:block；（在导航选项卡中常见）
4.FF和IE对box的理解不同，导致2px的差异，并且div的双边距在IE下设置为float
5.UL标签默认在FF下有列表样式和填充，最好提前声明以避免不必要的麻烦（常见于导航标签和内容列表）
6.作为外部包装，不要设置div的死高度，最好添加溢出：隐藏以实现高度适应性
7.关于手光标：指针。Hand仅适用于ie
干粮！免费获取腾讯高级讲师网页设计教程
我去拿
☝☝☝
关注网页设计的自学平台，我们99%的努力都在这里
▼如果无法识别二维码，可以单击“阅读原文」哦
最新评论