IE9背景：過濾器和jquery點擊事件

Question

奇怪的問題，我正在使用CSS3漸變創建淡出的疊加效果（ala lightbox）。在IE9中，我注意到（由於我使用filter：progid：DXImageTransform.Microsoft.gradient），我的覆蓋圖層不可點擊，並且不會阻止我單擊並在下面懸停。

我創建了一個小提琴： http://jsfiddle.net/tJPF6/

預期的行爲： 點擊數。 模態窗口出現。 無法將鼠標懸停在數字上以獲得懸停效果。 可以點擊疊加層上的任何位置關閉它。

IE9行爲： 點擊數字。 模態窗口出現。 可以將鼠標懸停在數字上以獲得懸停效果。 無法點擊疊加層上的任何位置關閉它。

有沒有人有這樣的經驗嗎？我可以回到使用PNG，但如果可能的話，寧願堅持使用漸變。

Answer 1

我會建議你留在PNG。爲什麼不使用IE瀏覽器過濾功能梯度的原因有很多：

• 微軟將無論如何貶低它CSS3特性，因爲它們將取代所有的功能在以往任何時候用於
• 在我的經驗中的過濾器中，渲染毫秒過濾器引擎（我曾經嘗試用它一點點）結合的網頁渲染的其餘部分可能會導致意想不到的結果：
  
  • 元素消失
  • 字體不能正常呈現
  • 鏈接無法點擊，懸停不工作（那種你遇到現在）

在你的情況，如果你已經實現了與巴的解決方案，離開它，因爲它是。它會爲您節省很多頭痛，無需任何啓動調試的時間等。

Answer 2

您只需要爲div添加實際背景。 IE在識別點擊具有透明背景的元素和CSS所帶來的問題方面存在着臭名昭着的問題，它使背景在技術上對每個IE版本都是透明的（過濾器不算作背景）。

前只需添加一個備用背景其他背景的定義，即：

#transCover { 
    background:#666; /* add this line */ 
    background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 1%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.4)), color-stop(1%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000', endColorstr='#66000000',GradientType=0); /* IE6-9 */ 
}