如何仅为 Internet Explorer 定义 CSS 样式？答案

【问题标题】：How to define CSS styles for Internet Explorer only?如何仅为 Internet Explorer 定义 CSS 样式？
【发布时间】：2012-12-10 02:03:22
【问题描述】：

我遇到过：

/* for firefox only */
@-moz-document url-prefix() {
#main_menu ul ul {
top: 37px;
}
}

仅可用于定义 firefox 样式，是否有类似的替代方法可用于定义仅与 IE 一起使用的样式？还是这里的“条件样式表”方法被认为是最佳实践？

在这种情况下，我只想更改下拉 CSS 菜单的上边距，因此只需要为 ie 调整几个样式。

谢谢。

ps 我遇到过：

我正在尝试说：

<!--[if IE]><!--> <html class="ie"> <!--<![endif]-->

在头部，然后在css中定义：

.ie#main_menu ul ul {
top: 50px !important;
}

但我在 IE 中看不到任何变化。

【问题讨论】：

【解决方案1】：

您应该将此代码放在 HTML 文件中，在您的通用 CSS 之后。现在，您将拥有另一个 CSS 文件（即.css），该文件将应用于大于（和等于）IE6 和更高版本的 IE8（和等于）的浏览器。

<!--[if (gte IE 6)&(lte IE 8)]>
  <link rel="stylesheet" href="css/ie8.css" media="screen,all" />
<![endif]-->

或者您可以在您的原始 CSS 文件中使用“star property hack”。在您的 CSS 规则前面加上一个星号，您将针对 IE7 和更低版本。示例：

div{
  top:20px;
  *top:10px;
}

【讨论】：

【解决方案2】：

您是在使用真实版本的 IE 进行测试，还是在开发者工具中更改版本？例如，IE 中的开发人员工具几乎从不准确表示它在 IE 8 中的外观。

【讨论】：

【解决方案3】：

您是否首先检查过您的样式规则是否在没有条件的情况下应用？您的 CSS 选择器可能有问题。我相信你的 CSS 选择器应该是“.ie #main_menu ul ul”而不是你所拥有的。注意“.ie”后面的空格

.ie #main_menu ul ul {
    top: 50px !important;
}

【讨论】：