浏览器的兼容性
产生原因
- 由于官方标准制定速度泰安，各个厂商自行制定标准，导致了属性与元素之间的差异。
- 由于官方标准的变化，浏览器需要去发布新的版本去支持新的标准。
厂商前缀
比如：box-sizing，谷歌旧版本浏览器中使用 -webkit-box-sizing
标准正在讨论中，浏览器厂商希望先支持。
常见的厂商前缀：
- IE: -ms-
- chrome,safari: -webkit-
- opera:-o-
- firfox:-moz-
谷歌浏览器的滚动条样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
overflow: auto;
}
/* 滚动条的整体样式 */
div::-webkit-scrollbar {
width: 10px;
background-color: lightblue;
}
/* 滚动条的滑块样式 */
div::-webkit-scrollbar-thumb {
background-color: #999;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident modi, maiores excepturi aliquid
voluptatibus ex? Maxime eos, voluptas, ratione quidem ducimus facere accusamus eius itaque molestiae voluptate,
blanditiis veritatis!</div>
</body>
</html>
多个背景图中选一个作为背景
div{
background-image:-webkit-imamge-set(url(1.jpg) 1x,url(2.jpg) 2x)
}
css hack
根据不同的浏览器（主要针对IE），设置不同的样式和元素。
- 样式
IE中css的特殊前缀：
- *属性，兼容IE5，6，7
- _属性，兼容IE5，6
- 属性：值/9，兼容IE5~IE11
- 属性：值/0，兼容IE8~IE11
- 属性：值/9/0，兼容IE9~IE10
IE5~7 浮动元素外边距bug，外边距会加倍。
- 条件判断
主要也是兼容IE浏览器
其他浏览器不能识别，ie浏览器可以识别
<!--[if IE]>
<p>这是ie浏览器</p>
<!--[endif]>
<p>其他浏览器</p>
渐近增强和优雅降级
两种解决兼容性问题的思路，会影响代码书写的风格。
-
渐近增强：先适应大部分浏览器，然后针对新版本浏览器，加入新的样式。书写代码时先避免书写有兼容性问题代码，完成功能后，在去逐步加入新的标准。
-
优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理。书写代码时先不用在意兼容性，完成功能后，再去针对低版本浏览器进行处理。
caniuse
查找css兼容性的网站。
