如何仅为特定的 IE 浏览器设置 CSS？答案

【问题标题】：How can I set CSS only for specific IE browsers?如何仅为特定的 IE 浏览器设置 CSS？
【发布时间】：2012-02-11 01:21:27
【问题描述】：

我有一个 CSS/jQuery Checkbox 样式脚本：http://jsfiddle.net/BwaCD/

问题是，在当前的浏览器中，为了让 span 浮动在输入上，输入的位置必须是绝对的。但是在 IE8 及以下版本中，该脚本将不起作用，因此我留下了绝对定位的输入，它只是浮动在其他元素之上。我不是要求脚本在 IE8 及以下版本中工作。

我想知道如果是 IE8 及以下，我如何使用 CSS 来设置特定样式。 我想如果有必要的话 jQuery 是可以接受的，但我不认为是这样。我知道这可以只用 CSS 和 HTML 来完成，我只是不知道怎么做。

【问题讨论】：

标签： css internet-explorer internet-explorer-8 internet-explorer-7 internet-explorer-6

【解决方案1】：

条件 cmets 可以工作 ()，但如果您想在样式表中完成所有操作，is a way:

body {  
    color: red; /* all browsers, of course */  
    color: green\9; /* IE only */  
}

这里重要的是“\9”，它必须是“\9”。我不清楚这是为什么。

编辑： \9 hack 本身是不够的。要排除 IE9，还需要:root hack：

:root body {
    color: red\9; /* IE9 only */  
}

除 IE 之外的其他浏览器可能支持 :root，因此如果您使用它来定位 IE9，请将其与 \9 hack 结合使用。

【讨论】：

看起来 \9 实际上针对所有版本的 IE，而不仅仅是 8 及以下版本。 mathiasbynens.be/notes/safe-css-hacks#css-hacks
\9 效果很好，并且由于 MS 从 IE10 开始放弃了条件 cmets，这似乎是唯一针对目标 IE 的无 js 解决方案。谢谢！
这就是答案。不知道其他答案在这里做什么
要定位 IE 11，您需要使用 \0 以及其他搜索 LESS 解决方案的人：color: e("green\0");

【解决方案2】：

怎么样？

http://www.quirksmode.org/css/condcom.html

或者如果你不喜欢这些陈述

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

【讨论】：

哇。谢谢。我只是想问一下，这些黑客行为是否安全？
黑客总是很糟糕！我建议使用我第一个链接中的解决方案，但如果你真的必须使用黑客，我找到了这个网站：browserhacks.com - 很高兴知道这些东西存在并且它们可以按需要工作，但你真的不应该使用它。跨度>

【解决方案3】：

编辑（8 月 28 日）：请注意，以下答案实际上仅适用于 Internet Explorer，至少版本 8 和更早版本。据我所知，目前没有主流浏览器支持条件 cmets，甚至 Internet Explorer 11。

您可以使用 Internet Explorer 的条件 cmets 将类名添加到 HTML 根标记对于较旧的 IE 浏览器：

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

然后您可以通过引用适当的类名来定义 IE 特定的 CSS，如下所示：

.ie8 body {
   /* Will apply only to IE8 */
}

来源：http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

【讨论】：

【解决方案4】：

针对所有版本的 IE：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

瞄准除 IE 之外的所有东西

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

仅针对 IE 7

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

仅针对 IE 6

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

仅针对 IE 5

<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

仅针对 IE 5.5

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

目标 IE 6 和更低

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

目标 IE 7 和更低

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

目标 IE 8 和更低

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

目标 IE 6 和更高

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

目标 IE 7 和更高

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

目标 IE 8 和更高

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

【讨论】：

【解决方案5】：

http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575

关于示例：color : green\9;

\9 不适用于 ie11，但 \0 有效！

【讨论】：

【解决方案6】：

我有一个适用于 IE 10 和 11 的有用解决方案。脚本检查 IE 和版本，然后将 .ie10 或 .ie11 类附加到标签。

这样您就可以编写特定的规则，例如 .ie10 .something {}，并且仅当浏览器为 IE 10 或 11 时才会应用它们。

检查一下，它对优雅降级很有用，在一些商业网站上进行了测试，并不是很hacky：http://marxo.me/target-ie-in-css

【讨论】：

【解决方案7】：

我用这种方法解决了 Internet Explorer 中的抓取光标：

.grab_cursor {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
    cursor: url('img/cursors/openhand.cur'), n-resize\9; /* IE 8 and below */
    *cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
    _cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
}

在适用于 Windows 8 及以下版本的 Internet Explorer 中，如果相对 URI 值在外部样式表文件中指定 base URI 被认为是包含元素而不是声明所在的样式表的 URI 出现。

文件树：

index.html
css/style.css -> here the posted code
img/cursors/openhand.cur

好的参考资料：

【讨论】：