在IE中隐藏CSS元素

Question

我需要在CSS中隐藏一个背景元素，以便IE浏览器不显示它。

这是CSS文件中的类：

.navbar-header .nav #presentacion {
    background:url("../img/horiz-line.png") no-repeat scroll 108px 20px transparent;
    display: block;
    height: 20px;
    margin-top: 20px;
}

我想使用这种方法，在页面的头部插入CSS来隐藏这一部分：

    <!--[if IE]>
          <style>
         .navbar-header .nav #presentacion {
         display: block;
         height: 20px;
         margin-top: 20px;
         background: none;}
    </style>
   <![endif]-->

它无法正常工作，在IE中仍然显示背景，我做错了什么吗？

- Koala7

---

你是在链接外部CSS样式表之前还是之后声明IE专用样式？ - Simon West

尝试使用 background: none !important;。 - RDX RaN

请注意，您无需重复整个样式块，只需使用background:none;即可。确保它在链接的样式表之后，在html的head部分中。 - Pevara

Answer 1

IE 10+不支持条件样式。因此，您必须在IE10+中使用以下内容：

<style>
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ styles */
  .navbar-header .nav #presentacion {
         display: block;
         height: 20px;
         margin-top: 20px;
         background: none;}
}
</style>

更多信息请访问： 如何为Internet Explorer 10定制特定的CSS或JavaScript代码？

- nxplace

Answer 2

使用反向方法。将 !IE 类应用于要显示背景图像的类。这只会在非 IE 浏览器中呈现。

<!--[if !IE]> -->
    <style>
    .navbar-header .nav #presentacion {
    background:url("../img/horiz-line.png") no-repeat scroll 108px 20px transparent;
    display: block;
    height: 20px;
    margin-top: 20px;
    }
    </style>
<!-- <![endif]-->

- Nithin Emmanuel

---

很好的建议！更有效，但远不如酷炫...找出你要针对哪个版本的IE，并直接针对它们。话虽如此，NOT运算符的表现很棒。干得好先生！ - albert

Answer 3

也许你在通用样式表之前声明了它，导致被覆盖了。尝试这个：

<!--[if IE]>
  <style>
    .navbar-header .nav #presentacion {
      display: block;
      height: 20px;
      margin-top: 20px;
      background: none !important;
    }
  </style>
<![endif]-->

- Danil Speransky

Answer 4

 <!--[if IE]>
          <style>
         .navbar-header .nav #presentacion {
         display: block;
         height: 20px;
         margin-top: 20px;
         background-image: none !important;}
    </style>
   <![endif]-->

- Prashobh