前端实现浏览器CSS兼容

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

• 五大主流浏览器：
  1.IE
  2.Firefox
  3.Safari
  4.Opera
  5.Google Chrome
• 四大浏览器内核：
  1.Trident
  2.Gecko
  3.Blink
  4.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

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会导致浏览器更新之后产生更多的兼容性问题。

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