以 IE9 或 IE8 为目标，但不能同时使用 CSS
Posted
技术标签:
【中文标题】以 IE9 或 IE8 为目标，但不能同时使用 CSS【英文标题】：Target IE9 or IE8 but not both using CSS 【发布时间】：2011-08-16 16:44:41 【问题描述】：我知道不应该这样做，但我现在只想快速修复，这样我就有时间找到合适的修复方法。
我如何使用 CSS 单独定位 IE8，因为我尝试附加 \9，例如：
margin:100px\9;
但是，它也会影响 IE9，我不希望这样，因为在 IE9 上整个网站看起来都很好。
【问题讨论】：
你的措辞有点混乱。你到底想做什么？只为 IE8 提供 CSS？ 是的，基本上是这样，我更新了我的答案以尝试更好地表达它:) 您应该花时间找到合适的解决方案，而不是在这里等待答案。 @BoltClock，对于编程问答网站上的合法编程问题，这是什么鬼态度？您应该利用这些时间来获得对他人的一点尊重，而不是劝阻人们使用 SO 的用途。 @eyelidlessness：我认为您在某种程度上误解了该评论的精神。 OP 说“我现在只想要一个快速修复，这会让我有时间找到合适的修复”。只为 IE8 提供单独规则的 hacky “快速修复”不如花时间正确找出实际的潜在问题。 【参考方案1】：来自html5 Boilerplate，最初来自Paul Irish：
将您的 标记更改为：
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
然后IE8会在html标签中添加一个.ie8类。所有其他版本的 IE 都一样。然后你可以这样做：
.ie8
margin:100px;
编辑： 删除了 no-js 类，并将 lang="" 属性更新为您的语言。谢谢，没眼皮。
【讨论】：
请注意，lang="en" 可能不合适，no-js 可能意味着在页面加载早期使用脚本删除。【参考方案2】：
这应该只适用于 IE9（也可能是较新的版本）：
:root #element-id
margin: 400px\9;
这是因为:root 伪类在IE9 之前的版本中没有实现（参见http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx）。
【讨论】：
这是最简单的，对我有用。它也没有针对 Firefox 或 Chrome。我仍然只能针对 IE8 特定的样式。感谢您的链接！【参考方案3】：你可以使用root函数
:root #element color:pink \0/IE9; /* IE9 + IE10pp4 */
仅在 IE 上破解
#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 + IE10pp4 */
:root #element color:pink \0/IE9; /* IE9 + IE10pp4 */
【讨论】：
【参考方案4】：有三种方法可以做到这一点，
IE 条件注释
IE 条件注释可能是修复特定版本（IE6、IE7、IE8）的 IE 错误的最常用方法。下面是一些针对不同版本 Internet Explorer 的示例代码：
<!--[if IE 8]> = IE8
<!--[if lt IE 8]> = IE7 or below
<!--[if gte IE 8]> = greater than or equal to IE8
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
特定于资源管理器的 CSS 规则（IE CSS hack）
另一种选择是声明只能由资源管理器读取的 CSS 规则。例如，在 CSS 属性将针对 IE7 之前添加一个星号 (*)，或者在该属性针对 IE6 之前添加一个下划线。但是，不推荐使用此方法，因为它们不是有效的 CSS 语法。
IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon.
IE7 or below: add an asterisk (*) before the CSS property.
IE6: add an underscore (_) before the property.
.box
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
条件 HTML 类
第三个选项，由 Paul Irish 创立，是通过使用 IE 条件 cmets 将带有 IE 版本的 CSS 类添加到 HTML 标签中。基本上，它会检查它是否是 IE，然后在 html 标签中添加一个类。因此，要针对特定的 IE 版本，只需使用 IE 类作为父选择器（例如 .ie6 .box）。这是一个聪明的方法，它不会导致任何验证错误。
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
【讨论】：
请注意，\9 hack 也会影响 IE9 和 IE10。以上是关于以 IE9 或 IE8 为目标，但不能同时使用 CSS的主要内容，如果未能解决你的问题，请参考以下文章
jQuery背景按钮动画适用于Chrome和IE8，但不适用于Firefox或IE9 [重复]