常见兼容性问题

解决浏览器兼容性问题

最新推荐文章于 2025-01-09 09:42:00 发布

原创最新推荐文章于 2025-01-09 09:42:00 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie 6 #浏览器

前端学习专栏收录该内容

37 篇文章

订阅专栏

本文主要探讨了在网页设计过程中常见的浏览器兼容性问题及其解决方案，包括PNG图片在IE6中的显示问题、清除默认的margin和padding、IE6双边距bug、IE条件注释的使用方法以及如何解决上下margin重合问题。

常见兼容性问题

png24位的图片在IE6浏览器上出现背景 => 做成png8，也可以引用一段脚本处理
浏览器默认的margin和padding不同 => 加一个全局的*{margin:0; padding:0; }来统一
IE6双边距bug：块级元素float之后，又有横行的margin，所以在IE6显示的margin比设置的大

#box{
        float: left;
        width: 10px;
        margin: 0 0 0 10px;
    }
    //这种情况下IE会产生20px的距离 =>在float的元素样式中加入_display: inline;(_这个符号只有ie6识别）

使用“\9”这一标记，将IE游览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别

#el {
        background-color: #000; /*所有识别*/
        .background-color: #000\9; /*IE6、7、8识别*/
        +background-color: #000;  /*IE6、7识别*/
        _background-color: #000;  /*IE6识别*/
}

怪异模式问题：漏写DTD声明，firefox仍然会按照标准模式来解析网页，但IE会触发怪异模式 => 避免怪异模式在文档顶部书写dtd声明：<doctype html>
上下margin重合问题：相邻兄弟元素在垂直方向上的margin值会呈现重合的情况，重合后会取两个元素里较大的的值作为重合后的值 => display: inline_block