CSS過濾器無法正常工作跨瀏覽器

我需要在圖像上放一個紅色徽章，它必須是跨瀏覽器和不同的Windows版本。CSS過濾器無法正常工作跨瀏覽器

我已經添加了以下CSS類，測試了IE7，IE8（XP）和IE9（Win7的），以及Chrome和Firefox，它看起來很不錯：

.ie9 .gradient{ 
    filter: none; 
} 

.badge { 
    background: #f8b3b7; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4YjNiNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzAxMDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, #f8b3b7 0%, #cc0103 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b3b7), color-stop(100%,#cc0103)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f8b3b7 0%,#cc0103 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f8b3b7 0%,#cc0103 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f8b3b7 0%,#cc0103 100%); /* IE10+ */ 
    background: linear-gradient(top bottom, #f8b3b7 0%,#cc0103 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8b3b7', endColorstr='#cc0103',GradientType=0); /* IE6-8 */ 
    position: absolute; 
    top: 0; 
    left: 15px; 
    width: 11px; 
    height: 12px; 
    border: solid 1px white; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -ms-border-radius: 4px; 
    border-radius: 4px; 
    color: white; 
}

HTML中包含：

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie9"> <![endif]--> 
    ... 
<div id="iconContainer"> 
    <div class="badge gradient">!</div> 
</div>

不過，我已經報道了一些變化（顯然IE9 Win7上，不知道是否32位或64位），它不工作，而不是紅色的徽章，只有它的白色邊框被看到。內容是透明的而不是紅色。

由於我在重現該錯誤方面遇到了問題，因此我想知道它是否可能與特定瀏覽器的設置有關。它會是嗎？如果是這樣 - 哪些設置？或者也許到操作系統版本（32/64bit）。有什麼其他的建議在這裏有什麼問題？

謝謝。

來源

2013-05-26 Haji

CSS渲染應該只與瀏覽器有關。也許他們在加載一些CSS文件時遇到了問題，或許它會對瀏覽器寬度產生反應，也許JavaScript會太快（如果可以，請發佈）？ –

@JanDvorak感謝您的回覆，但我無法指責我的根源。我知道CSS已加載（徽章的邊框可見，以及徽章應該出現的圖像）。我不知道JavaScript在這裏如何相關。 – Haji

我發現問題可以重現的環境 - Vista 32位上的IE8（儘管不知道這是發生該問題的唯一環境）。無論如何，刪除行'background：url（...）'似乎可以解決它。我在Chrome和FF上做了一些測試，看起來很好。這一行的目的是什麼？它的目標是哪些瀏覽器？當CSS中的兩條規則似乎碰撞時會發生什麼，就像前面提到的那條線和上面那條線一樣（'background：＃f8b3b7;'） – Haji

對漸變使用簡寫「背景」，它將覆蓋背景作爲一個整體，當瀏覽器遇到無效參數時，它將使其變爲透明。您應該使用背景圖像，而不是

你應該使用這段代碼代替，並編輯成自己喜歡（IE瀏覽器的過濾器，如果這就是你想要的）：

.box_gradient { 
    background-color: #444444; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */ 
    background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */ 
    background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */ 
    background-image:  -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */ 
    background-image:   linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ 
}

從css3please.com服用。

來源

2013-05-31 14:19:23

也可以看一下[PrefixFree]（http://leaverou.github.io/prefixfree/） - 然後你可以編寫一個'background-image'屬性來照顧所有的現代瀏覽器。你只需要爲老版本的IE添加'filter'屬性。 – daGUY

CSS過濾器無法正常工作跨瀏覽器

回答

相關問題