主流浏览器的CSS hack

css hack

    1.背景介绍

       css hack这是一种技术手段，目的是解决不同浏览器对css解析不一致的问题，最终产生的效果就是可以跨终端，在不同浏览器中展示一致的界面效果。

通常，浏览器差异包括了浏览器提供的API接口不一致，以及他们的渲染引擎对css解析的差异。

1.浏览器API接口一般有：输入URL的地址栏、前进后退按钮(bom对象也可以实现)、书签选项、刷新按钮、Home主页按钮

2.渲染的过程一般为：解析ＨＴＭＬ、构建ＤＯＭ树，渲染树构建，渲染树布局，绘制渲染树。

有兴趣的可以参考一下这篇文章

浏览器是怎样工作的：渲染引擎，HTML解析

2.常用方法

1.条件注释法

IE浏览器推荐使用语法，即在head中添加以下内容，则浏览器对应解析相对于的结构。        

<!--[if IE 6]>仅支持IE6
<![endif]-->

<pre name="code" class="javascript"><!--[if gte IE 6]>支持IE6以上版本
<![endif]-->

 2.元素内属性前缀法

在css选择器前面加上一些前缀，则对应浏览器解析可以识别的标签。

常用的有：

ALL:        background-color:red;/*所有 Firefox/Chrome 浏览器都支持*/

IE6:         _background-color:red; /*  下划线_前缀选择器  */

IE6/7:       *background-color:red; /*  *号前缀选择器  */

        IE9/10: background-color:red\9\0;/* 其中\9表示支持IE9 , \0表示支持IE10  */

 

 3.元素选择器前缀法

IE6:     *p{ /*css样式*/}

        IE7:     *+p{/*css样式*/}

IE9:      p\9{/*css样式*/}

        IE10:    p\10{/*css样式*/}

    3.其他主流浏览器兼容

-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}}  /*opera*/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/

主流浏览器css hack总结