在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頁面hidding頭部分類：

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

它不工作，IE的背景仍然顯示，我做錯了什麼？

Answer 1

也許你在你的通用樣式表之前聲明它，它被覆蓋。試試這個：

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

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-image: none !important;} 
    </style> 
    <![endif]--> 

Answer 4

IE 10 +不支持conditionnal風格。所以，你必須用這個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> 

此處瞭解詳情： How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?