浏览器兼容性

问题产生的原因

• 市场竞争
• 标准版本的变化

厂商前缀

比如：box-sizing，谷歌旧浏览器中使用-webkit-box-sizing： border-box

原因

• 市场竞争，标准没有发布
• 标准还在讨论中（草案），浏览器厂商希望先支持

IE：-ms-

Chrome， safari： -webkit-

opera： -o-

firefox： -moz-

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

1. 谷歌浏览器滚动条

   ::webkit-scrollbar

   /**设置滑块样式 */
    ::webkit-scrollbar-thumb

   /**设置滚动条样式 */
    ::webkit-scrollbar-track

   /**设置滚动条上下按钮样式 */
   ::webkit-scrollbar-button

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

2. 背景图多选一

-webkit-image-set()

css hack

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

1. 样式

IE中，CSS的特殊前缀

• *属性（例如：*background），兼容IE5、6、7
• _属性（例如：_background），兼容IE5、6
• 属性\9（例如：background: red\9），兼容IE5-10
• 属性\0（例如：background: red\0），兼容IE8-10
• 属性\9\0（例如：background: red\9\0），兼容IE9-11

IE5、6、7的外边距BUG，浮动元素的外边距会翻倍

2. 条件判断

<!--[if IE]>
 <p>这是IE浏览器</p>
<![endIf]-->

<!--[if !IE]><-->
 <p>这不是IE浏览器</p>
<!--<![endIf]-->

渐进增强 和 优雅降级

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

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

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

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

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

caniuse

查找CSS兼容性