IE無法識別圖像上透明背景的盒子

我在這裏有一個jsfiddle - http://jsfiddle.net/wERsY/ - 其中一個透明背景的盒子放置在圖像左上角的圖像的上方一半。圖像和盒子是絕對定位的，並且盒子被賦予比圖像更高的z-索引。IE無法識別圖像上透明背景的盒子

使用FF，Safari和Chrome時，將鼠標懸停在整個框上（遊標轉到指向框的任何部分時指向一個指針），然後單擊該框會觸發單擊處理程序，紅色的盒子。

但與IE瀏覽器（我正在運行的IE10）只有部分框是而不是在圖像上可見。如果將鼠標懸停在圖像上方的部分框中，則光標不會更改爲指針，點擊也不會執行任何操作。

如果您給出了彩色背景框（取消註釋CSS的第4行），那麼IE會看到整個框，包括圖像上的部分。

有沒有人知道這裏發生了什麼，以及如何獲得一個透明的框可以點擊圖像與IE瀏覽器？

感謝

HTML 
<img id='pelican' src='http://s20.postimg.org/fpitivjl9/Pelican.jpg' alt="pelican"/> 
<div id='clickBox'> </div> 

CSS 
div#clickBox { 
    width:100px; 
    height:100px; 
/* background-color:yellow; */ 
    cursor:pointer; 
    position:absolute; 
    top:0px; 
    left:0px; 
    z-index=51; 
} 
img#pelican { 
    position:absolute; 
    top:50px; 
    z-index=50; 
} 

jQuery 
$('#clickBox').click(function() { 
     $(this).css({backgroundColor:'red'}); 
    })

來源

2013-11-22 Steve

在IE transparent真的是透明的，你看不到它，鼠標還看不出來，如果有潛在的可見元素。

使用背景顏色和opacity: 0，並更改opacity而不是background-color。 A live demo at jsFiddle。

來源

2013-11-22 06:19:48 Teemu

是的，這有效。謝謝。唯一的問題是，當你給一個元素一個0不透明度時，_everything_變爲0不透明度，包括邊框。就像'backgroundColor：transparent'離開邊框一樣，我想應用一個不透明度，只是給背景顏色0不透明。 – Steve

嗯...我沒有考慮邊界，因爲你的小提琴沒有邊框。如何使用「透明」包裝？ – Teemu

是的，圍繞不透明div的包裝讓我保持包裝邊框。但不透明的div給我帶來了各種各樣的麻煩，因爲它上面還有一層需要能夠寫作，而不透明的div卻干擾了可信度。（我知道，我也沒有提到這一點。）我最終發現的是，如果你在透明盒子周圍放置一個邊框，IE會在圖像上看到盒子，IE不關心邊框顏色是否透明。所以最簡單的解決方案就是在元素周圍放一個透明的邊框。感謝您的輸入。 – Steve

IE無法識別圖像上透明背景的盒子

回答

相關問題