css hack
1.背景介绍
css hack这是一种技术手段,目的是解决不同浏览器对css解析不一致的问题,最终产生的效果就是可以跨终端,在不同浏览器中展示一致的界面效果。
通常,浏览器差异包括了浏览器提供的API接口不一致,以及他们的渲染引擎对css解析的差异。
1.浏览器API接口一般有:输入URL的地址栏、前进后退按钮(bom对象也可以实现)、书签选项、刷新按钮、Home主页按钮
2.渲染的过程一般为:解析HTML、构建DOM树,渲染树构建,渲染树布局,绘制渲染树。
有兴趣的可以参考一下这篇文章
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*/