不同IE下的css写法

CSS Hack 是在标准 CSS 没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析 CSS 没有达成一致前,我们只能用这样的方法来完成这样的任务。

最近的项目要针对 firefox 浏览器的css样式进行 特别处理,可爱的 firefox 居然不支持 text-overflow 属性(不过事后发现 firefox8.0 已经支持了，firefox酱…你也更新得太快了吧，后台那边大部分还是3.6的说，你说叫我情何以堪呢)，所以顺带梳理下各个浏览器的 css hack 写法。

以这个 html demo为例来介绍各个浏览器的 css hack 方法：

1	<!-- html document -->

2	<h3class="tl"> hello jackNEss </h3>

IE 的 CSS hack 写法

我们可爱的 IE 常常给我们带来各个神奇的问题，增加我们对她的仇恨值（特别是 IE6、7，你们懂的），所以对于我们前端来说， IE的 css hack 应该不陌生：

CSS hack for IE6

这种是针对 IE6- 浏览器的 CSS hack，具体有 2 种写法：

写法一

1	/* css document IE5.5 IE6 css hack */

2	.tl{ _color:#7ecef4;}

写法二

1	/* css document IE5.5 IE6 css hack */

2	* html .tl{ color:#7ecef4;}

其中 第二种方法能通过 w3c 验证。

CSS hack for IE7

针对 IE7 浏览器的 CSS hack 大致有3种写法：

写法一

1	/* css document IE5.5、IE6、IE7 css hack */

2	.tl{ *color:#7ecef4;}

写法二

1	/* css document IE7 css hack */

2	*+html .tl{ *color:#7ecef4;}

其中 第二种方法能通过 w3c 验证。

CSS hack for IE8

针对 IE8 浏览器的 CSS hack 大致有2种写法：

写法一

1	/* css document IE5.5、IE6、IE7、IE8 css hack */

2	.tl{ color:#7ecef4\9;}

写法二

1	/* css document IE8 css hack */

2	.tl{ color:#7ecef4\0;}

CSS hack for IE9

写法一

1	/* css document IE8、IE9 css hack */

2	.tl{ color:#7ecef4\0;}

写法二

1	/* css document IE8、IE9 css hack */

2	.tl{ color:#7ecef4\9\0;}

firefox 的 CSS hack 写法

第一个使用了 body:empty 来区分 Firefox 1 和 2 。第二个 hack使用了全部 Firefox 浏览器的专有扩展 -moz。 -moz- 只对 Firefox有效，使用这个 Hack 大可不必担心其他浏览器的影响。

1	/* css document Firefox 1、Firefox 2 css hack */

2	body:empty .tl{ color:#f90;}

 

1	/* css document Firefox css hack */

2	@-moz-document url-prefix(){

3	.tl{ color:#f90;}

4

}

Opera 的 CSS hack 写法

1	/* css document Opera css hack */

2	@media alland (-webkit-min-device-pixel-ratio:10000), not alland (-webkit-min-device-pixel-ratio:0){

3	.tl{ color:#f90;}

4

}

chrome、safari 等 webkit内核浏览器 的 CSS hack 写法

1	/* css document chrome、safari css hack */

2	@media screenand (-webkit-min-device-pixel-ratio:0){

3	.tl{ color:#f90;}

4

}