为什么非IE浏览器读取带有！important的IE条件

Question

当使用带有 ！important 的 IE 条件（例如下面的代码）时，无论浏览器如何，背景都默认为带有 ！important 的背景色，即使在 IE 条件中也是如此。

如何重写它，以便浏览器接受小于IE9的背景颜色和IE9和其他浏览器中的图像（高度/宽度：100%，不重复）？

注意：我计划在默认情况下主题自动设置颜色或图像的 Wordpress 站点中使用它，因此我必须使用 ！important 来覆盖默认主题样式。

body {
<!--[if lt IE 9]>
background-color:#c1beb2 !important;
background:#c1beb2 !important;
<![endif]-->
<!--[if gte IE 9]>
background-image: url("http://example.com/wp-content/example.png") !important;
background-position:left bottom;
background-size: 100% 100%;
background-repeat: no-repeat;
<![endif]-->
<![if !IE]>
background-image: url("http://example.com/wp-content/example.png") !important;
background-position:left bottom;
background-size: 100% 100%;
background-repeat: no-repeat;
<![endif]>
}

Answer 1

条件注释应该在HTML中使用，而不是CSS。

也就是说，在 HTML 中链接到特定于 IE 的样式表，如下所示：

<!--[if lte IE 9]> 
<link rel="stylesheet" href="/ie.css" type="text/css" media="no title" charset="utf-8" />
<![endif]-->

这是正确的方法。如果你不想创建一个完整的其他IE特定的样式表，你可以依靠CSS IE Hacks。

Answer 2

好的等

一下。据我所知，这些（！）浏览器开关在css中不起作用。所以你需要像这样在 html 中制作切换部分：

<!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="IE9.css">
<![endif]-->
<!--[if gte IE 9]>
  <link rel="stylesheet" type="text/css" href="IEgte9.css">
<![endif]-->

然而，这是一种糟糕的风格。通常，您不希望拥有浏览器的单个样式。在极少数情况下，您也需要。查看 html5 样板以获取有关此内容的一些信息。