如何防止IE篩選器掩蓋背景圖片

Question

該網站是here。當單擊菜單中的按鈕時，Internet Explorer將隱藏圖標。這不是其他瀏覽器的行爲。該圖標是可點擊的<a>的背景。點擊時是否有顯示圖標的方法？

是否有可能僅使用CSS，當點擊<a>時，過濾器將應用於<li>？

這樣，<a>的背景圖標將被保留。

Answer 1

我找到了解決問題的辦法。替換此代碼：

<!--[if IE]><style type="text/css"> 
#menu li a:active { 
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66')"; 
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66'); 
    padding: 39px 0px 2px 0px; 
    margin-bottom:1px; 
} 
</style><![EndIf]--> 

有了：

<!--[if IE]><style type="text/css"> 
#menu li a:active { 
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66') progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://lh5.googleusercontent.com/_qvhVKLFln2A/TZ8U5OiFLlI/AAAAAAAAHqg/7OQqVItePoo/menu_icon.png')"; 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66') progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://lh5.googleusercontent.com/_qvhVKLFln2A/TZ8U5OiFLlI/AAAAAAAAHqg/7OQqVItePoo/menu_icon.png'); 

    padding: 39px 0px 2px 0px; 
    margin-bottom:1px; 
} 
</style><![EndIf]--> 

你會得到相同的背景圖像中的每一個環節。對此的解決方案是爲每個鏈接分別提供不同的圖像：信息，聊天，...

Answer 2

您是否嘗試過使用相同背景設置「a：active」或可能是「a：visited」？

W3Schools CSS :active Selector

Answer 3

爲什麼我們看到這個錯誤的原因，是因爲它吸引了梯度的圖標，所以作爲臨時解決方法，這裏是修復的IE瀏覽器。如果您有最後一個條件標記，請將透明顏色設置爲endColorStr。

<!--[if IE]><style type="text/css"> 
#menu li a:active { 
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#000000ff')"; 
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#000000ff'); 
    padding: 39px 0px 2px 0px; 
    margin-bottom:1px; 
} 
</style><![EndIf]-->