欢迎来到 jackNEss'窝窝
I like simple mind

css hack 整理

2011年11月13日

CSS Hack

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

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

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

<!-- html document -->
<h3 class="tl" > hello jackNEss </h3>	

IE 的 CSS hack 写法

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

CSS hack for IE6

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

写法一

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

写法二

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

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

CSS hack for IE7

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

写法一

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

写法二

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

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

CSS hack for IE8

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

写法一

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

写法二

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

CSS hack for IE9

写法一

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

写法二

/* 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 大可不必担心其他浏览器的影响。

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

Opera 的 CSS hack 写法

/* 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 写法

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

演示地址:http://www.jackness.org/lab/css_hack/demo.html

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

Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Konqueror ( KHTML )
Safari ( WebKit )
Chrome ( WebKit )

分类HTML + CSS
标签
阅读 1,398
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS