-
CSS兼容
兼容性问题来源
内核是浏览器中最底层、最核心的代码，决定了网页在浏览器如何解析的，网页时如何被加载的。
不同的浏览器的有不同的内核，每种浏览器对相同的代码有不同的解析方式，最终结果不一样，这种情况就是兼容性问题。
同一网页在不同浏览器下运行出现的结果不一样，就叫兼容。
浏览器内核
不同的浏览器内核是不一样。
目前主流浏览器：chrome、firfox、opera、IE、safira等
国产浏览器：猎豹、360、QQ、搜狗、UC等等，
目前国内没有自己的内核，360浏览器推出双核：IE trident和safira 的webkit 一起集成。
内核的作用
解析网页
- HTML内容解析
- CSS解析
- js解析
内核有个重要的概念：渲染引擎
渲染引擎包含几部分：
- HTML解析器：会将html代码解析成一颗DOM树，上面每个节点就是对应的标签
- CSS解析器：将css样式计算出来，内存cpu一起工作
- JavaScript解析器：允许运行js脚本的环境
- 布局：主要网页中模块定位、浮动、排列等等。
网页解析流程（网页是如何解析出来的）
加载网页代码
- 判断是否是网络资源，是就利用网络模块从网络上获取网页代码
- 如果是本地的文件，则直接加载本地 文件代码到内核中
经过html解析器，对代码进行解析
浏览器从代码第一行开始解析，把不同类型的代码交给对应的解析器进行解析
- css代码——> css解析器
- JavaScript代码——> JavaScript解析器
- html代码——>html解析器
将各个解析器的结果综合进行梳理（内部表示）
将标签和对应的css结合起来，每个标签都有自己的渲染对象，里面包含了该标签最终的样式
布局和绘图
会把每个标签的样式、位置绘制在页面上，如果需要使用图片、视频音频等内容，再利用对应的模块来处理，处理完成之后直接显示在页面上。
兼容性问题的处理
hack代码（针对IE浏览器）
专门针对特定浏览器设置css代码
针对不同的浏览器或者浏览器不同的版本写不同的代码，这个写css代码的过程称为css hack。
CSS hack分类
属性前缀法
属性前缀法是在css代码属性名前添加一些特定浏览器才能识别的hack前缀，以达到预期效果。
- 缺点：属性前缀只能单个属性设置，多个属性一个一个设置。
| hack | 写法 | 实例 | IE6 (S) | IE6 (Q) | IE7 (S) | IE7 (Q) | IE8 (S) | IE8 (Q) | IE9 (S) | IE9 (Q) | IE10 (S) | IE10 (Q) |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| * | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| + | +color | 绿色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | 黄色 | Y | Y | N | N | N | N | N | N | N | N |
| _ | _color | 蓝色 | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| \0 | color:red\0 | 红色 | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0 | color:red\9\0 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
| !important | color:blue !important; color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
选择器前缀法
通过在css代码的选择器前添加一些特定浏览器能识别的代码。
| 语法 | IE6 | IE7 | IE8 | IE9 | IE10 |
|---|---|---|---|---|---|
| * html * | √ | × | × | × | × |
| * +html*+ | × | √ | × | × | × |
| @media screen\9{…} | √ | √ | × | × | × |
| @media \0screen{…} | × | × | √ | × | × |
| @media \0screen\ , screen\9{…} | √ | √ | √ | × | × |
| @media screen\0{…} | × | × | √ | √ | √ |
| @media screen and (min-width:0\0){…} | × | × | × | √ | √ |
| @media screen and (-ms-hirh-contrast : active) , (-ms-high-contrast:none){…} | × | × | × | × | √ |
条件注释法
通过注释的语法来完成样式指定版本导入。
- gte 大于等于 gt大于 lte小于等于 lt小于 ！否
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->