常见兼容性问题

关注

原创最新推荐文章于 2026-05-13 05:38:52 发布 390 阅读 AI 写同款· GEO 优化 ›

不同浏览器的兼容问题不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，所以浏览器兼容性问题一般指：css兼容、js兼容 浏览器 内核（渲染引擎） Chrome谷歌之前Webkit，已改Blink内核 FireFox火狐 Gecko Safari苹果 Webkit IE Trident Opera欧朋现已改用Google Chrome的Blink内核 css兼容 ... 阅读详情

常见兼容性问题

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

收录于