浏览器的兼容问题

概述：不同版本的浏览器 浏览器不同的版本 因为各种原因有着兼容问题 IE浏览器在这方面遗留的问题更加明显

问题产生原因

• 市场竞争：导致各种浏览器，除了按官方标准书写代码 还自己书写了自己的一套规则

• 标准版本的变化 > chrome 54 支持部分css3的功能

厂商前缀

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

• 市场竞争， 标准没有发布

• 标准仍在讨论中（草案），浏览器厂商先支持

IE:-ms-box-sizing
Chrome,safari:-webkit-box-sizing
opera:-o-box-sizing
firefox:-moz-box-sizing

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

1. 谷歌浏览器的滚动条样式

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

2. 多个背景图中选中一个作为背景

css hack 针对一些浏览器用不同的css写法

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

1. 样式

IE中， css的特殊符号

• 属性前面加*号 兼容IE5、IE6、IE7
• 属性前面加_线 兼容IE、IE6
• 属性值后加/9 兼容IE5~IE11
• 属性值后加/0 兼容IE8~IE11
• 属性值后加/9/0 兼容IE9~IE11

IE5、IE6的外边距bug，浮动元素的左外边距翻倍

2. 条件判断

<! – [if IE]>这中间加上的元素IE浏览器可以识别<!–[if !(IE)]> – >（IE可以识别代码中的特殊的注释）

渐近增强 和 优雅降级

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

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

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

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

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

caniuse

查找css兼容性

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