2009.05 03

CSS Hack: 区分 IE6 / IE7 /IE8 /Firefox

标签: , ,
Featured, 资源共享

今天被在修改CSS的时候，突然碰到要单独Hack IE8的。当然，用注释非常方便，只要添加相应的注释就可以解决。但问题是，为了一句CSS写多一个文件，或者在header上添加注释，那显然不是懒人的习惯做法。结论如下：

css hack

selector{
property:value; /* 所有浏览器 */
property:value\9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}

当然，注意顺序。根据CSS的优先性，上面的写法，分别针对Firefox、IE8、IE7和IE6显示值。让我们看看这个演示：

演示的CSS代码如下：

p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;
color:blue; // 所有浏览器
color:brown\9; // 所有IE浏览器
+color:red; // IE7
_color:green; // IE6
}

哈，事实就这么简单。你看到的是那一句话呢？如果你多个浏览器都测试了，就会看到，显示的文字和颜色是不同的。为什么？看看我的HTML中这个段落是这样写的：

<p class="ie">
<span style="display:block;display:none\9;">嘿嘿，小子竟然也用Firefox，蓝色文字。</span>
<!--[if IE 8]>不错不错，挺先进的嘛，使用IE8呢！文字是褐色的。<![endif]-->
<!--[if IE 7]>你，IE7，红色文字！<![endif]-->
<!--[if IE 6]>孩子，虽然显示的是绿色文字，不过，IE6可不是好东西呢！<![endif]-->
</p>

对，就是IE条件注释+CSS的结果。顺路学一下IE条件注释吧。不用再举例了吧，一看就知道那个对那个了。

源代码下载：ie-firefox-hack.zip

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » Featured, 资源共享 »

53

  1. 2009.05.03 8:04 pm
    Sivan(visit): [回复]

    好代码，不知道这代码符合标准么。

  2. 2009.05.03 8:04 pm
    netputer(visit): [回复]

    哇，沙发？！

  3. 2009.05.03 8:05 pm
    netputer(visit): [回复]

    囧，在 Twitter 上，五分钟前的推，现在来踩，居然还有个板凳，- -。
    IE 注释好重要，不过是不是也要加上 Chrome 、 Opera 等浏览器的捏？

  4. 2009.05.03 8:05 pm
    herb(visit): [回复]

    好文呐, 离楼主这么近, 心情\(≧▽≦)/, 呵呵

  5. 2009.05.03 8:07 pm
    Showfom(visit): [回复]

    @netputer:BS你没抢到沙发

  6. 2009.05.03 8:13 pm
    sofish(visit): [回复]

    @Sivan: 已经被称了hack了，所以，不是标准，哈。

    @netputer: 你看错了，应该是2分钟前的推。

    @herb: -,-…

    @Showfom: 私下解决，私下解决。

  7. 2009.05.03 8:15 pm
    z.Yleo77(visit): [回复]

    简洁明了。。

  8. 2009.05.03 8:28 pm
    Leeiio(visit): [回复]

    話說我正有寫css hack的打算，這就寫去！～

  9. 2009.05.03 10:18 pm
    manboo(visit): [回复]

    学习，学习下。。

  10. 2009.05.03 10:46 pm
    Lorz小朋友说(visit): [回复]

    前几天刚写了个简单的页面，在 IE6下面也面目全非，正需要这个～

  11. 2009.05.03 11:11 pm
    任平生(visit): [回复]

    竟然还有 \9 这种用法。。。 ie 太神奇了。。。

  12. 2009.05.03 11:18 pm
    zwwooooo(visit): [回复]

    在折腾模板，正需要，很及时，谢了

  13. 2009.05.03 11:27 pm
    tonic(visit): [回复]

    ie果然是折腾人的王牌浏览器～

  14. 2009.05.04 1:57 am
    welee(visit): [回复]

    还想着 IE hack 谁不知道呢，sofish 怎么还写这个，进来一看，囧了，这方法我还真不知道，哈哈哈！让我学习到了，感谢！

    其实 IE8 已经不太需要 hack 了，我发现 IE8 确实符合了 W3C 的标准，反而 IE7 和 6 让我很头大，已经有种想完全放弃支持 IE6 的冲动了。

  15. 2009.05.04 2:47 pm
    303girls(visit): [回复]

    还有这么value的代码啊

    以后常来瞧瞧!!

  16. 2009.05.04 5:25 pm
    WordPresss啦!(visit): [回复]

    不错，不错，果如楼主所说

  17. 2009.05.05 12:02 am
    hoorace(visit): [回复]

    看到你的总结我很汗颜，以前学习的时候没有怎么这样深入的总结过只是，只是自己知道就好了，看来以后我需要学会分享。

  18. 2009.05.05 4:52 pm
    :-)(visit): [回复]

    您好
    {
    color:brown\9; // 所有IE浏览器
    +color:red; // IE7
    _color:green; // IE6
    }
    这些个css里面的brown\9，+color，-color都代表什么意思呢？麻烦解释一下，刚学css….
    谢谢！

  19. 2009.05.06 8:23 am
    威廉(visit): [回复]

    不太明白
    不过能套用
    很实用的
    ……

  20. 2009.05.07 6:35 pm
    shamas(visit): [回复]

    学习了，建ＣＭＳ站点很多时候都要用这个

  21. 2009.05.08 1:22 pm
    Alex(visit): [回复]

    先收藏了先，不知道那天会用上的。。

  22. 2009.05.08 4:30 pm
    leehow(visit): [回复]

    特别的日子特别一踩。

  23. 2009.05.10 1:16 pm
    zhchsf(visit): [回复]

    不懂，还是顶顶

  24. 2009.05.10 3:28 pm
    bolo(visit): [回复]

    学习了，很有价值的文章

  25. 2009.05.11 2:07 am
    二手科学家(visit): [回复]

    IE确实很麻烦，难搞哈！

  26. 2009.05.11 2:35 pm
    聊天(visit): [回复]

    IE6什么时候死啊····

  27. 2009.05.11 5:21 pm
    中国瓷器(visit): [回复]

    这些开发浏览器的企也不统一一下。
    弄得我写程序的人天天都在搞css

  28. 2009.05.12 10:58 am
    Lok(visit): [回复]

    微软真是在浪费大家生命~~自家的浏览器都要有那么多hack~~吐~

  29. 2009.05.12 5:53 pm
    ahuyang(visit): [回复]

    很麻烦。
    IE8是可以识别头部申明的。
    在头部申明在浏览器为IE8时，按照IE的标准执行就OK了。

  30. 2009.05.12 5:54 pm
    ahuyang(visit): [回复]

    IE7 的标准执行。打掉了个字。我汗~

  31. 2009.05.12 11:40 pm
    weimei(visit): [回复]

    问一下，用JS代码加CSS怎么实现这个啊。
    sofish好长时候都没发博客了，不晓得是不是特忙啊？？

  32. 2009.05.13 2:19 pm
    斑马(visit): [回复]

    很明显，我用的是IE7的版本。不过还是对代码没啥兴趣。

  33. 2009.05.14 10:37 am
    谷百优(visit): [回复]

    人气很旺啊

  34. 2009.05.14 10:24 pm
    会律博客(visit): [回复]

    有要盖地基了，咋们跑不上顶楼~！

  35. 2009.05.15 8:17 am
    RisingSun(visit): [回复]

    呵呵，撑起底部哈

  36. 2009.05.15 12:06 pm
    别用鼠标点我(visit): [回复]

    以前就知道这种方法了.

  37. 2009.05.15 2:42 pm
    biotech(visit): [回复]

    很有前途的文章

  38. 2009.05.16 1:50 pm
    先看看(visit): [回复]

    我也试一下。

  39. 2009.05.17 10:21 am
    guanzhuhb(visit): [回复]

    强力顶一下！ 很不错的源码！

  40. 2009.05.17 5:05 pm
    alswl(visit): [回复]

    这个博客真好看，内容也超好，订阅了！

  41. 2009.05.23 11:00 pm
    weimei(visit): [回复]

    能问一下吗，我用IE8，怎么CNZZ识别的却是IE6呢？？

  42. 2009.05.24 9:26 am
    sofish(visit): [回复]

    @weimei: 不太清楚他们用什么识别方法。用排除法会造成这样的结果…

  43. 2009.05.26 10:29 am
    冰剑(visit): [回复]

    不错，转走了哦！

  44. 2009.06.10 11:09 am
    沿阶草(visit): [回复]

    识别不了safari，chrome

  45. 2009.06.12 5:48 pm
    roln(visit): [回复]

    想转载这篇文章　非常不错

  46. 2009.06.16 12:45 am
    iDea1983(visit): [回复]

    学习了！不知道一个对代码不通的我能学到什么程度！

  47. 2009.06.24 1:53 pm
    网页打不开(visit): [回复]

    为啥没有 *呢

  48. 2009.06.26 12:52 pm
    afeiship(visit): [回复]

    你的文章真是，精典！

  49. 2009.08.08 1:33 pm
    丐王(visit): [回复]

    这种方法我比较少用，不过还是学习，以后试试~~

  50. 2009.08.22 8:34 pm
    jack(visit): [回复]

    我用的是chrome，但显示兰色ff，哈哈！

  51. 2009.11.04 2:45 pm
    aliceangl(visit): [回复]

    测试结果是IE6中显示的仍然是蓝色，根本不是绿色！！

  52. 2009.11.13 11:52 am
    7nian(visit): [回复]

    很强大…

  53. 2010.01.14 8:23 pm
    lixiphp(visit): [回复]

    太经典了，转载一下！

Additional comments powered by BackType