[转]CSS Hack For IE Firefox Opera Chrome

1
1242

今天添加了个修改版的验证码插件,感觉很是不错,可是问题是Chrome下刷新的小图标显示有点问题,于是找CSS hack for Chrome,顺便记下来。

IE 的 CSS hack 写法

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

CSS hack for IE6

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

写法一

1
2
/* css document IE5.5 IE6 css hack */
	.tl{ _color:#7ecef4;}

写法二

1
2
	/* css document IE5.5 IE6 css hack */
	* html .tl{ color:#7ecef4;}

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

CSS hack for IE7

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

写法一

1
2
	/* css document IE5.5、IE6、IE7 css hack */
	.tl{ *color:#7ecef4;}

写法二

1
2
	/* css document IE7 css hack */
	*+html .tl{ *color:#7ecef4;}

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

CSS hack for IE8

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

写法一

1
2
	/* css document IE5.5、IE6、IE7、IE8 css hack */
	.tl{ color:#7ecef4 \9;}

写法二

1
2
	/* css document IE8 css hack */
	.tl{ color:#7ecef4 \0;}

CSS hack for IE9

写法一

1
2
	/* css document IE8、IE9 css hack */
	.tl{ color:#7ecef4\0;}

写法二

1
2
	/* css document IE8、IE9 css hack */
	.tl{ color:#7ecef4\9\0;}

firefox 的 CSS hack 写法

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

1
2
	/* css document Firefox 1、Firefox 2 css hack */
	body:empty .tl{ color:#f90;}
1
2
3
4
	/* css document Firefox css hack */
	@-moz-document url-prefix(){
	    .tl{ color:#f90;}
	}

Opera 的 CSS hack 写法

1
2
3
4
	/* css document Opera css hack */
	@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
	    .tl{ color:#f90;}
	}

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

1
2
3
4
	/* css document chrome、safari css hack */
	@media screen and (-webkit-min-device-pixel-ratio:0){
	    .tl{ color:#f90;}
	}

附:各种常见浏览器使用的内核 (Rendering Engine)

  • Mozilla Firefox ( Gecko )
    Internet Explorer ( Trident )
    Opera ( Presto )
    Konqueror ( KHTML )
    Safari ( WebKit )
    Chrome ( WebKit )
  • 1条评论

    发表回复