HTML css——浏览器兼容性

浏览器兼容性

问题产生原因

市场竞争
标准版本的变化

厂商前缀

• 市场竞争，标准没有正式发布
• 标准仍在讨论，厂商希望先支持

比如 box-sizing. 谷歌旧版浏览器中使用-webkit-box-sizing:border-box

IE ： -ms-
Chrome Safari: -webkit-
opera:-o-
firefox: -moz-

浏览器在处理样式或元素时，使用如下方式：
当遇到无法识别的代码，直接略过.

实际上，开发中使用自定义滚动条，往往使用div+css+js实现

css hack

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

1. 样式

ie中，css的特殊符号：

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

IE5~7的外边距bug，浮动元素的左外边距翻倍

2. 条件判断

渐进增强 和 优雅降级

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

• 渐进增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式
  书写代码时，先尽量避免书写兼容性问题的代码，完成之后，再逐步加入新标准中的代码

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

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

caniuse

查找css兼容性

caniuse.com