前端实现浏览器CSS兼容

浏览器样式加载不一致的原因
网页由浏览器通过浏览器内核对其进行解析，而不同的浏览器内核对网页的解析存在不同。因而，同一页面在不同的浏览器上显示存在差异。
（略：浏览器内核的不同导致页面渲染不一致）
市面上的主要浏览器及其使用的浏览器内核

五大主流浏览器：
1.IE
2.Firefox
3.Safari
4.Opera
5.Google Chrome
四大浏览器内核：
1.Trident
2.Gecko
3.Blink
4.Webkit
浏览器与浏览器内核关系

浏览器名称	浏览器内核	私有属性
IE浏览器	Trident(也称IE内核)	-ms-
火狐浏览器	Gecko	-moz-
Safari	Webkit	-webkit-
Opera	Blink(基于Webkit)	-o-
Chrome	Blink(基于Webkit)	-webkit

浏览器实现CSS兼容处理

CSS样式初始化
- 推荐库：Normalize.css
浏览器私有属性
- -web kit- chrome\safari
- -moz- 火狐浏览器私有属性
- -ms- IE浏览器私有属性
- -o- opera浏览器私有属性
  注：可通过插件解决
CSS hack
说明：针对不同浏览器甚至不同版本进行编写的CSS样式，称之为CSS hack。
- CSS类内部hack
  注：主要针对类内部hack，如：IE6能识别""和""，IE7能识别""，但不能识别""，firfox两个都不能识别。
- 选择器hack

标记	IE6	IE7	IIE8	FF	Opera	Safari
[*+><]	√	√	X	X	X	X
-	√	X	X	X	X	X
\9	√	√	√	X	X	X
\0	X	X	√	X	√	X
* +html .bb	X	√	X	X	X	X

bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */


/*一个用于展示的class为bb的div标签*/

< div class ="bb"></ div >

+   **HTML头部引用（if IE）hack**
```
    只在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浏览器版本，如6、7、8，但IE10及以上版本已将条件注释特性移除，使用时需注意*
+ hack的书写顺序（按浏览器）：FF IE7 IE6;

Important在IE6里边不生效

3.为什么不推荐使用CSS hack来解决兼容性问题
CSS hack是因为现有浏览器对标准的解析不同，为了兼容各浏览器，所采用的一种补救方法。滥用hack会导致浏览器更新之后产生更多的兼容性问题。

hack三大原则
- 有效
- 只针对太古老的/不再开发/已被抛弃的浏览器
- 代码要丑陋……让别人时刻记住想办法去掉它
  参考资料
  CSS hack技巧大全
   CSS浏览器兼容性，最完整处理方案
   史上最全的CSS hack方式一览