HTML + CSS 宝典 第七节 浏览器兼容性

                                                       浏览器兼容性

---

兼容性问题产生的原因：

1. 市场竞争，    官方(W3C）标准制定 延后了,  各个浏览器 厂家 自行 添加新的属性，造成了市场混乱；

2. 标准版本的变化， 官方的标准也会发生变化，

 

厂商前缀 ：

还未成为  W3C 标准   或者标准还在讨论当中， 但是某厂商 提前支持的属性 ，

比如： box-sizing;     谷歌旧的浏览器会要求这么写：     -webkit-box-sizing：border-box

 

常见的厂商前缀

• IE                -ms-

• Chrome       -webkit-

• Safari          -webkit-

• Opera          -o-

• FireFox        -moz-

 

    <style>
        div {
            border: 2px solid;
            width: 200px;
            height: 200px;
            padding: 50px;
            box-sizing: border-box;
            -ms-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -o-box-sizing: border-box
        }
    </style>

 

左边是 火狐浏览器，          右边是谷歌浏览器

浏览器在处理样式 或者元素 时， 使用如下方式：

• 当浏览器遇到 无法识别样式 的代码时，  直接略过

 

VSCode 插件可以，自动帮助我们 填充 厂商前缀

 

CSS  hack

根据不同的 浏览器（主要针对 IE），设置不同的样式 和 元素

   1 .样式

   IE 中，CSS 的特殊前缀

• *属性，         表示：  兼容  IE5，IE6， IE7
• _属性，        表示：  兼容  IE5 ~ IE6
• 属性值\9,      表示：  兼容  IE5 ~ IE11
• 属性值\0       表示：  兼容  IE8 ~ IE11
• 属性值\9\0    表示：  兼容  IE9 ~ IE10

div {
    width: 200px;
    height: 200px;
    background: red;
    *background: blue;
    _background: yellow;
    background: orangered\9;
    background: orangered\0;
    background: black\9\0;
}

    

 两种解决 兼容性问题的思路，会影响代码书写的风格

•  - 渐进增强： 先适应大部分浏览器，然后针对新版本浏览器 加入新的样式；

          书写代码时， 先避免书写有兼容性问题的代码，完成之后 在逐步加入新标准中的代码

•  - 优雅降级： 先制作完整功能，然后针对低版本浏览器 进行特殊处理

          书写代码时，先不用特别在意兼容性，完成整个功能之后， 再针对低版本浏览器处理样式

 

 

查找 CSS 兼容性：

[caniuse.com] https://caniuse.com/