html - 在 IE 中隐藏 CSS 元素

Question

我需要在 IE 的 CSS 中隐藏一个背景元素。

这是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 中，我做错了什么？

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 特定的 CSS 或 Internet Explorer 特定的 JavaScript 代码，如何仅针对 Internet Explorer 10？

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]-->

Answer 3

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

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

Answer 4

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