IE10錨定標籤z-index問題

在IE 10中，我有一個相對定位的包裝div與一些內容（圖像/文本）。該div的內部是一個絕對定位的定位標籤，用於「覆蓋」整個包裝div。它有一個z-索引集。所以包裝div內的整個區域應該是可點擊的。但是，只有wrapper div中沒有內容的區域是可點擊的。整個包裝div可以在除IE 10以外的所有其他瀏覽器中點擊。這裏是一個小提琴：http://jsfiddle.net/NUyhF/3/。幫幫我？IE10錨定標籤z-index問題

<div class="wrapper"> 
    <div class="imgWrapper"> 
     <img src="http://www.google.com/images/srpr/logo4w.png" /> 
    </div> 
    <p>Here is some text</p> 
    <a href="#"></a> 
</div> 

.wrapper { position : relative; width: 500px; height: 300px; } 
.wrapper a { position: absolute; top: 0px; width: 500px; height: 300px; z-index: 2; }

來源

2013-03-27 Adam Clason

我發現這是IE的一個惱人的特質一段時間，要解決它，我不得不做出一個透明的圖像，並把它作爲定位標記的背景：

background:url(transparent1x1.gif) repeat;

http://jsfiddle.net/NUyhF/6/

來源

2013-03-27 15:36:22 Pete

沒錯，就是工作。但它不一定是背景圖像（=加載額外資源） - 只需使用'background：rgba（0,0,0,0）;'也可以。 – CBroe 2013-03-27 15:38:55

現在語義上正確地將塊級元素包裝在錨標記中（使用html5文檔類型）。我會建議修改你的標記。

HTML

<a href="#"> 
    <div class="imgWrapper"> 
     <img src="http://www.google.com/images/srpr/logo4w.png" /> 
    </div> 
    <p>Here is some text</p> 
</a>

來源

2013-03-27 15:51:07

謝謝，但不幸的是我必須支持傳統瀏覽器。 – 2013-03-27 16:23:49

這將在舊版瀏覽器上正常工作。我支持ie7，並沒有問題。 – 2013-03-27 16:32:40

好的 - 你說過「HTML5允許」。我希望我能接受這兩個答案！但是，JSFiddle是我在那裏實際使用的html的簡化版本，因此我使用透明顏色背景更容易。 – 2013-03-28 12:22:38

IE10錨定標籤z-index問題

回答

相關問題