z-index屬性在IE8中不會導致重疊

.thumbnail:hover 
{ 
    background-color: transparent; 
    z-index: 1; 
}

我已經指定了這種樣式來使圖像在鼠標懸停時與另一圖像重疊。除了IE8以外，它可以在所有其他瀏覽器中正常工作。我試着爲z-index指定更高的值，但它沒有奏效！z-index屬性在IE8中不會導致重疊

這是縮略圖

.thumbnail { 
    position: relative; 
    z-index: 0; 
} 

.thumbnail:hover { 
    background-color: transparent; 
    z-index: 50; 
} 

.thumbnail span { 
    position: absolute; 
    background-color: lightyellow; 
    padding: 5px; 
    right: -500px; 
    border: 1px dashed gray; 
    visibility: hidden; 
    color: black; 
    text-decoration: none; 
} 

.thumbnail span img { 
    border-width: 0; 
    padding: 2px; 
    width: 400px; 
    height: 300px; 
} 

.thumbnail:hover span { 
    visibility: visible; 
    top: 0; 
    right: -290px; 
    vertical-align: top;} 
The HTML part for the CSS is mentioned below : <a id="aPhotos" href="SubscribersPropertyDetail.aspx" class="thumbnail" runat="server"> <img id="imgPhotos" border="0" height='130' width='150' title='Click to view full details about this property' runat="server" /> <span id="spanZoom" runat="server"> <img id="imgzoomphotos" src='~/images/PropertyImages/NoImage.jpg' runat="server" /></span> </a>

來源

2010-09-17 banupriya

我已經嘗試將位置更改爲相對和絕對，但都沒有按預期工作！ – banupriya 2010-09-17 07:48:51

是否嘗試爲.thumbnail的父級設置位置和z-index值？請參閱下面的答案。在IE中，你需要開始一個新的堆棧。如果你粘貼一段html，我肯定有人可以爲你設置一個工作示例 – lnrbob 2010-09-17 08:05:15

ASP.Net中的CSS書寫器的HTML部分如下所示： – banupriya 2010-09-17 09:13:15

我將z-index屬性添加到縮略圖：將span span style懸停爲比縮略圖樣式更高的值。這解決了！ .thumbnail：hover span {/ CSS用於放大懸停圖像/ visibility：visible; top：-140px;/*放大圖像應該水平偏移的位置*/ left：-500px; z-index：51; }

來源

2010-09-17 11:02:15 banupriya

http://stackoverflow.com/questions/1290191/z-index-broken-in-ie8 – banupriya 2010-09-17 11:07:00

是的，這就是我在下面說的。很高興你把事情解決了！ – lnrbob 2010-09-17 13:04:15

你有一個position屬性設置另一個.thumbnail選擇中相關的完整樣式？

.thumbnail:hover { 
    background-color: transparent; 
    position: relative; 
    z-index: 2; 
}

來源

2010-09-17 06:52:30 Kevin

沒有所有的代碼（或至少更多的代碼），這是很難評估。一般來說，IE瀏覽器工作時，應該將元素位置設置爲相對或絕對。此外，父元素應設置爲position：relative; z-index：1。如果這不起作用，請發佈更多信息。謝謝！

編輯

啊，我現在明白了。您需要作爲.thumbnail的孩子的跨度在懸停時出現。有些瀏覽器會根據元素的順序來允許它。爲了確保它能正常工作

.thumbnail { 
    position: relative; 
    z-index: 1; 
} 

.thumbnail:hover { 
    background-color: transparent; 
} 

.thumbnail span { 
    position: absolute; 
    background-color: lightyellow; 
    padding: 5px; 
    right: -500px; 
    border: 1px dashed gray; 
    visibility: hidden; 
    color: black; 
    text-decoration: none; 
    z-index: 50; 
}

來源

2010-09-17 06:53:38 lnrbob

z-index屬性在IE8中不會導致重疊

回答

相關問題