11.29浏览器兼容性

浏览器兼容性

原因

• 市场竞争
• 标准的变化

厂商前缀

比如box-sizing 属性，在旧版的谷歌中使用**-webkit-**box-sizing，加粗的就是厂商前缀

常见的厂商前缀：

1. IE：-ms-
2. Chrome，Safair：-webkit-
3. opera：-o-
4. Firefox：-moz-

为了获得最大的兼容性，可以在对应的浏览器中加上对应的厂商前缀的代码

比如

div{
    box-sizing: border-box;
    /* 这是一个有兼容性问题的属性，所以后面加上带有厂商前缀的代码 */
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

每次要保证兼容性的时候都要写这么多句很麻烦，所以推荐使用一个VScode的插件：Autoprefixer 使用方法为：按下F1，选择即可
浏览器在读代码的时候，如果遇到无法识别的代码，会直接略过

介绍一个查找兼容性的网站：caniuse.com

可以上去找兼容性

ps：浏览器兼容性问题在政府网站里面很严重，如果你要写政府网站的话，祝福你