CSS Hacks
Java一直标榜一句老话叫“编写一次，到处运行(Write Once,Run Anywhere)”，CSS也差一点点做到了。但就是为了差的一点点往往需要大量的工作，虽然这并不是CSS的错。基本上别妄想兼容所有的解析器了，仅仅是为了让网页在YUI中列举的A级浏览器呈现一致就不是一件特别容易的事情。虽然通过精心的组织HTML结构加上使用最合适最通用的CSS代码可能实现多浏览器呈现一致，但当在视觉的过度设计、精确到像素的规定和前端快速实现的要求的前提下，可能你不得不为不同的浏览器写不同的CSS代码，这就是CSS Hacks了。我们的目标是保持CSS简洁和没有CSS Hacks，但即使多年以前就呼吁Keep CSS simple的PPK也不得不在他的网站中使用CSS Hacks，即便如此其站点在所有的A级浏览器中也无法保持一致的呈现。所以，下面这个我常用的CSS Hacks列表或许有些用：
| IE6 | IE7 | Firefox2+ | Firefox3+ | Opera9.5+ | Safari3.1+ | |
|---|---|---|---|---|---|---|
| 选择符{ *属性:值; }[1] |
√ | √ | × | × | × | × |
| 选择符{ _属性:值; } |
√ | ×[2] | × | × | × | × |
| 选择符,x:-moz-any-link{ 属性:值; } |
× | √ | √ | √ | × | × |
| 选择符,x:-moz-any-link,x:default{ 属性:值; } |
× | √ | × | √ | × | × |
| @media all and (min-width:0){ 选择符{属性:值;} }[3] |
× | × | × | × | √ | √ |
| @media all and (-webkit-min-device-pixel-ratio:0){ 选择符{属性:值;} }[4] |
× | × | × | × | × | √ |
这里有一个上述CSS Hacks的应用的例子可以看看。
- [1] 此处的*号其实也可以是.号、>号、+号和#号。但它们都不属于CSS2.1规范合法属性名的一部分，所以不能通过验证。
- [2] 当IE7为quriks mode时和IE6为quriks mode解析相同，所以此时这个表达式在IE7中也能生效。这个hack已经应用了很久了，下划线_作为属性名的前缀是符合CSS2.1规范语法的，但不存在于其属性名列表中，所以依旧不能通过标准语法验证。对于多个IE的CSS Hacks，条件注释是一个很值得考虑的解决方案。另外对于IE8可以关注其新功能和变化，但现在考虑其CSS Hacks问题有点过早，真的有需求可以通过增加<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />来解决。
- [3] 如果把表达式中的and和(中间的空白去掉变成@media all and(min-width:0){选择符{属性:值;}}，那么Safari3+将无法识别，Opera9.5+则可以。
- [4] 这个表达式Opera9.0是支持的。
上面这些CSS Hacks仅仅是沧海一粟，是一些简单的通用的CSS Hacks。这个世界上还存在很多很知名很经典的CSS Hacks，更多的CSS Hacks可以看这里：
- Browser CSS hacks
- CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer
- CSS Hacks for Different Versions of Firefox
- CSS hacks
- CSS Hack
- Will the browser apply the rule(s)?
- Tricking Browsers and Hiding Styles
- 与臭虫为友——浏览器补救办法，臭虫以及解决方案（第二部分）
- CSS Hackz Series: Targeting and Filtering Internet Explorer 7
- Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs—中文版
- CSS让你的IE浏览器崩溃
- Internet Explorer CSS Bugs—中文版
- 【IE6的疯狂系列】IE6 BUG大全
讨厌Hack，我就只提供标准的，你丫爱用不用，哈哈。
=.=
现在也是极其讨厌HACKS了．
现在一般只做符合IE的就行了，反正大多数人用的都是IE，为了那少之又少的使用非IE的客户的客户去HACK，真不值得．
@ 柠檬，作为一名web developer，还是应该努力追求一些追求的。simple is beautiful.
不错不错，很有用
@则名:
如果说simple is beautiful的话,那不是更不应该去CSS HACKS了?
看起来有些矛盾,不过这些也正是理想照进现实的交错.
楼主少了个×+………..
@柠檬，我说的simple is beautiful是指的一本书，指这本书阐述表达的类似勿以善小而不为的态度和作风。你怎么会理解成不去css hacks了？
看来还是没办法不用Hacks啊.
是啊，管他的呢，简单才是好啊
我不需要关心web标准，IE占有99%的市场，我做的页面只要IE能看就可以了。
“以用户为核心”通常都是反对web标准者的档箭牌，实际上这是虚伪的“以用户为核心”。你不能保证IE永远是垄断浏览器市场，你也不能保证IE不做任何改变(事实上，微软的IE7已经开始改善对 web标准的支持)。
当然，如果做的方式合理，可以兼容多数主流浏览器最好，可是在需要用HACK解决的时候我们不能逃避（虽然我也很头疼）。
个人觉得如果一个web developer连兼容都不去做了，做界面就没有什么意义了。
“IE占有99%的市场”
好像没那么大吧？FF的市场份额在增加。。。
hack只有在万不得已的时候才用，还是少用好
如果不关心浏览器的兼容，不关心javascript的特性和css的特性，那就别做web developer了，去做windows c++好了。
虽然说不推荐用hack,但是在迫不得已的情况下确实需要用一下的。不能因为ie6,ie7,ie8占用了大部分市场而忽略了其他的浏览器的。ff的使用人数近期也是在增长中。虽然说一般兼容ie6,ie7跟ff就行了,但是最近发现Opera有时也会出现一些其他浏览器不会出现的问题,谷歌也是。
所以今天特意来到这里收集hack的方法。虽然很久以前就收藏了这个地址。但是一直都没有发现opera跟谷歌的问题。今天遇到了,特地来谢谢你。
IE8下是背景是白色。
[...] 更详细的介绍请参考http://dancewithnet.com/2008/07/12/css-hacks/ #hacks-show{ background:teal;/*IE6,IE7,IE8,1-9,a-d,A-D,0则IE8和Opera10.50*/ [;background:maroon;];/*Safari4.0+,Chrome4.0+,IE6*/ *background:purple;/*IE6,IE7*/ _background:red;/*IE6*/ } @-moz-document url-prefix(){/*Firefox3.0+*/ #hacks-show{ background:blue; } body:first-of-type #hacks-show{/*Firefox3.6+*/ background:olive; } } /*Safari4.0+,Chrome4.0+ @media all and (-webkit-min-device-pixel-ratio:0){ #hacks-show{ background:maroon; } } */ /*Opera10.50+,Safari4.0+,Chrome4.0+ @media all and (min-width:0px){ #hacks-show{ background:green; } } */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){/*Opera10.50*/ #hacks-show{ background:green; } } No Comments [...]
[...] 以上表格CSS Hacks的应用的例子，可以看看。 以上表格来源：《CSS Hacks》@随网之舞 [...]