IE9的css hack

以前写过《IE8的css hack》,ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下:

[code=”css”]
select {
background-color:red\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/
*background-color:#dddd00; /* ie 7*/
_background-color:#CDCDCD; /* ie 6*/
}
[/code]
注意写hack的顺序,其中:

  1. background-color:red\0;IE8和IE9都支持;
  2. background-color:blue\9\0; 仅IE9支持;

更多其他hack关注:https://www.html.cn/archives/1681
感谢mxclion,感谢内部参考群!

===============华丽的分割线===============

今天在http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx上看到另一种hack:
[code=”css”]
#element {
color:orange;
}
#element {
*color: white; /* IE6+7, doesn’t work in IE8/9 as IE7 */
}
#element {
_color: red; /* IE6 */
}
#element {
color: green\0/IE8+9; /* IE8+9 */
}
:root #element { color:pink \0/IE9; } /* IE9 */
[/code]

赞(0) 打赏
未经允许不得转载:WEB前端开发 » IE9的css hack

评论 39

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    帅,不过还是喜欢用条件注释html。

    Sivan8年前 (2011-06-22)回复
  2. #-48

    如果使用 background:blue\9 的话, 就会有问题
    缩写属性需要单独写才能有效, 比如 margin, padding 这些

    任平生8年前 (2011-06-22)回复
    • @任平生, 好吧,其实说的是 background:blue\9 的话就会有问题。之前写漏了。
      也可以这么写:
      .class{ background:blue} /* ie8 ie9 */
      :root .class{ background:orange} /* ie 9*/
      ie9 支持 :root 选择器,也支持 的hack,所以可以利用这个来单独hack ie9

      任平生8年前 (2011-06-25)回复
    • @任平生, \9 \ 0 中的 \ 0会被过滤掉???

      任平生8年前 (2011-06-25)回复
    • @任平生, 重新写一遍:
      好吧,其实说的是 background:blue\9 \ 0 的话就会有问题。之前写漏了。
      也可以这么写:
      .class{ background:blue\ 0} /* ie8 ie9 */
      :root .class{ background:orange\ 0} /* ie 9*/
      ie9 支持 :root 选择器,也支持 \ 0 的hack,所以可以利用这个来单独hack ie9

      请自动无视 \ 0 中间的空格… =_=

      任平生8年前 (2011-06-25)回复
      • @任平生,
        :root .class{ background-color:orange; }这样opera也认识;
        个人认为应该:
        :root .class{ background-color:orange\9; } /* IE9 */

        jhti8年前 (2011-08-02)回复
  3. #-47

    好 感谢分享

    Teiny8年前 (2011-06-22)回复
  4. #-46

    求分享多模式浏览器调试工具……

    i-designers8年前 (2011-06-22)回复
    • @i-designers, 记录一下,顺便帮你回答个问题:ieTester还不错,也有些集成的浏览器,不过感觉ieTester经常在js方面出问题,还是原生的IE好,就像码头用虚拟机

      断桥残雪8年前 (2011-06-22)回复
  5. #-45

    好久不用hack了,
    条件注释比较和谐

    phoetry8年前 (2011-06-22)回复
  6. #-44

    哈哈,了解一下,一般就是 background-color

    WIND8年前 (2011-06-23)回复
  7. #-43

    *background-color:#dddd00;
    这个貌似也支持IE6

    jerry8年前 (2011-06-23)回复
  8. #-42

    刚好在找IE9的hack
    我喜欢用来测试的 FUCK IE…… 我的博客(才弄好不久 也没几篇文章呢)已经添加了贵站的链接,求一个友情链接~
    还有也想加入 js丛林 和 前端交流群

    LiZn8年前 (2011-06-23)回复
  9. #-41

    纠正一下第二种方法:
    *color: white; 对IE都有效

    rains8年前 (2011-06-24)回复
    • @rains, 不知道你用什么工具测试的 但是*对IE8 9 是不起作用的 你可以再试试

      LiZn8年前 (2011-06-24)回复
    • 我的博客主题侧边栏给主流浏览器和低版本IE使用不同的样式 用hack做的 发现那个 opera也可以识别的 google过了没查到什么有用的 难道说现在根本无视opera

      LiZn8年前 (2011-06-24)回复
  10. #-40

    汗 我上一个回复是说 \ 0 这个hack opera也可以识别 。。

    LiZn8年前 (2011-06-25)回复
    • @LiZn, 无视opera的飘过!

      8年前 (2011-06-25)回复
      • @, -。-好吧,没人要求的话我也无视opera了。再次求友情链接一个哈哈。。

        LiZn8年前 (2011-06-25)回复
    • @LiZn, 亲!带单位的 opera不认识的

      mxclion8年前 (2011-07-23)回复
  11. #-39

    firefox没问题,ie9也不会有问题的,要hack的依然还是ie678.

    vimest8年前 (2011-07-01)回复
  12. #-38

    正文有误,请尽快修改background-color:blue\9; /* ie 9*/不对

    Yoda8年前 (2011-07-28)回复
  13. #-37

    怎么评论显示不出呢 ie9hack 不是\9li连缀

    Yoda8年前 (2011-07-28)回复
  14. #-36

    给ie8注释后background:#993333\9;
    再给ie9background:#993333\9;后 ie9的正常了,但是ie8的却不正常了啊???

    折断翅膀的yy7年前 (2011-08-26)回复
  15. #-35

    { *property } ie6,ie7
    { _property } ie6
    { +property } ie7
    { property:value\9; } all ie
    { property:value; } ie8,ie9

    Jason Wang7年前 (2011-10-10)回复
  16. #-34

    由于本人的电脑不能安装IE9,所以麻烦高手看一下网站在IE9下存在的问题,麻烦各位高手给指正一下,代码该如何修改?在此谢谢大侠了!

    jkjk7年前 (2011-10-14)回复
  17. #-33

    由于本人的电脑不能安装IE9,所以麻烦高手看一下网站在IE9下存在的问题,麻烦各位高手给指正一下,代码该如何修改?在此谢谢大侠了!http://www.jnxiangrui.com/fenju QQ756646409

    jkjk7年前 (2011-10-14)回复
  18. #-32

    background-color:blue\9; /* ie 9*/
    ie8也是支持的,请修正

    Tmenglang7年前 (2011-11-26)回复
  19. #-31

    码头哥, \9 这个IE8也支持。我这2天测试发现的。

    beautycss(小晗)7年前 (2011-11-30)回复
  20. #-30

    分享下我的笔记:

    /* Chrome, Safari, Firefox */@media all and (min-width:0) { }

    /* Chrome, Safari */
    @media screen and (-webkit-min-device-pixel-ratio:0) { }

    /* IE6+ */
    .class {
    color: red\9;
    }

    /* IE8+ */
    .class {
    color: red;
    }

    /* IE8 only */
    @media screen { }

    /* IE9 only */
    :root .class { }

    /* 目前只发现 color、background-color 可以这样区分IE8和IE9 */
    .class {
    color: red; /* IE8+ */
    color: blue\9; /* IE9 only */
    }

    wo_is神仙7年前 (2011-12-16)回复
  21. #-29

    哎呀~ \ 0 被过滤掉了,重新发下,注意实际使用时,中间没空格

    /* Chrome, Safari, Firefox */
    @media all and (min-width:0) { }

    ———————————————————————————-

    /* Chrome, Safari */
    @media screen and (-webkit-min-device-pixel-ratio:0) { }

    ———————————————————————————-

    /* IE6+ */
    .class {
    color: red\9;
    }

    ———————————————————————————-

    /* IE8+ */
    .class {
    color: red\ 0;
    }

    ———————————————————————————-

    /* IE8 only */
    @media \ 0screen { }

    ———————————————————————————-

    /* IE9 only */
    :root .class { }

    ———————————————————————————-

    /* 目前只发现 color、background-color 可以这样区分IE8和IE9 */
    .class {
    color: red\ 0; /* IE8+ */
    color: blue\9\ 0; /* IE9 only */
    }

    wo_is神仙7年前 (2011-12-16)回复
  22. #-28

    fuck ie!!

    愤怒的站长7年前 (2012-01-17)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏