黑暗的艺术: CSS Hack

dnnsun@gmail.com — Wed, 22 Jul 2009 10:32:14 GMT

何谓CSS hack ?

由于不同的浏览器，比如IE6,IE7,Mozilla Firefox等，对CSS的解析原理不一致导致生成的页面效果千差万别，此时我们需要生成不同的样式让其兼容不同的浏览器，并得到理想的效果。详细请看: http://en.wikipedia.org/wiki/CSS_filter

说到底就是利用浏览器某些bugs来做文章, 没有哪位UI设计者希望使用CSS Hack, 大家羞于表达自己曾用过Hack, 但是有时你不得不出卖自己的灵魂给Hack. 目前我们项目希望可以在大部分的浏览器上通过验证, 工作量可想而知, 就好比我这会的签名档是“在windows7上蹂躏IE6,是无奈也是悲哀啊", 不管怎么样，总之本人的机器已经安装了5款浏览器，同时因为有些没法在windows7下安装，我们不得已独立一个额外的机器专门安装其他旧版本的浏览器，蔚为壮观。正希望浏览器这个恶魔在娘胎里就是over了, 有点”矫枉过正“,:) 回归正题, 其实今天在此就想跟大家分享一些目前基本的CSS Hack, 至少对我们目前这个项目蛮管用的(日子还得一天一天过, 尽管牢骚不断, 呵呵)

/* Internet Explorer */
 
/* IE 6 only */
body #ie6 {
     _display: block;
}

/*IE 6 and IE 7 */
#ie6andie7 {
     *display: block;
}

/* IE 7 only */
html > body #ie7 {
    *display: block;
}

/* IE 6, IE 7 and 8 */
body #ie6andie7andie8{
    display:block\9;
}   

/* IE 8 only */
body #ie8{
    display:block\9;
    *display: none; /*overrule for ie6 and ie7 which also read this rule*/
}

 
/* Firefox */
 
/*Firefox 2 and 3 */
#firefox2, x:-moz-any-link {
    display: block;
    *display: none; /*overrule for ie6 and ie7 which also read this rule*/
}

/*Firefox 3 only (for Firefox 2 only use the rule above and this to overwrite for Firefox 3*/
#firefox3, x:-moz-any-link, x:default {
    display: block;
    *display: none; /*overrule for ie6 and ie7 which also read this rule*/
}
  
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #safari {
        display: block;
    }
}
    
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    head~body #opera {
        display: block;
    }
}

最后喊一下口号: 尽量做到符合W3C标准, 不得已才Hack, 并尽可能用简便灵活的方案.

http://lifesinger.org/blog/2009/06/goodbye-to-css-hack/

Baldwin's DNN

黑暗的艺术: CSS Hack

何谓CSS hack ?