如何仅为特定的 IE 浏览器设置 CSS？
Posted
技术标签:
【中文标题】如何仅为特定的 IE 浏览器设置 CSS？【英文标题】：How can I set CSS only for specific IE browsers? 【发布时间】：2012-02-11 01:21:27 【问题描述】：我有一个 CSS/jQuery Checkbox 样式脚本：http://jsfiddle.net/BwaCD/
问题是，在当前的浏览器中，为了让 span 浮动在输入上，输入的位置必须是绝对的。但是在 IE8 及以下版本中，该脚本将不起作用，因此我留下了绝对定位的输入，它只是浮动在其他元素之上。我不是要求脚本在 IE8 及以下版本中工作。
我想知道如果是 IE8 及以下，我如何使用 CSS 来设置特定样式。 我想如果有必要的话 jQuery 是可以接受的，但我不认为是这样。我知道这可以只用 CSS 和 html 来完成，我只是不知道怎么做。
【问题讨论】：
【参考方案1】：条件 cmets 可以工作 (<!--[if lte IE 8]><stylesheet><![endif]-->)，但如果您想在样式表中完成所有操作，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
好的参考资料：
One Two Three Four【讨论】：
以上是关于如何仅为特定的 IE 浏览器设置 CSS？的主要内容，如果未能解决你的问题，请参考以下文章