CSS Hack 是在标准 CSS 没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析 CSS 没有达成一致前,我们只能用这样的方法来完成这样的任务。
最近的项目要针对 firefox 浏览器的css样式进行 特别处理,可爱的 firefox 居然不支持 text-overflow 属性(不过事后发现 firefox8.0 已经支持了,firefox酱…你也更新得太快了吧,后台那边大部分还是3.6的说,你说叫我情何以堪呢),所以顺带梳理下各个浏览器的 css hack 写法。
以这个 html demo为例来介绍各个浏览器的 css hack 方法:
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 */ |
写法二
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 */ |
写法二
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 */ |
写法二
1 | /* css document IE8 css hack */ |
CSS hack for IE9
写法一
1 | /* css document IE8、IE9 css hack */ |
写法二
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(){ |
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){ |
chrome、safari 等 webkit内核浏览器 的 CSS hack 写法
1 | /* css document chrome、safari css hack */ |
2 | @media screenand (-webkit-min-device-pixel-ratio:0){ |