IE8，定位和懸停不起作用

我有一個僞畫廊設置爲顯示縮略圖並在縮略圖上懸停時顯示放大的圖像。放大的圖像相對於其父縮略圖進行定位。IE8，定位和懸停不起作用

這適用於谷歌瀏覽器和Mozilla Firefox，但不適用於IE8。

我已經做了一些研究，沒有在這個問題上取得進展。在IE8中，顯示縮略圖和放大圖像。在IE8中，'可見性：隱藏'，'懸停'和'絕對位置'似乎都不起作用。

希望有任何幫助。下面是一個代碼段：

.main{ 
    float:right; 
    display: block; 
    Background-color:transparent; 
    Margin: 20px 55px 20px 10px; 
} 

.main img{ 
    display: block; 
    border:0; 
} 

.main:hover{ 
    background-color:#ffffff; 
    position: relative; 
    visibility:visible; 
    z-index: 1400; 
} 

/*for bigger images*/ 
.main bigger { 
    width: 500px; 
    height: 500px; 
    position: absolute; 
    left: -2000px; 
    visibility: hidden; 
    overflow: hidden; 
    background-color:transparent; 
    border:0; 
} 

.main:hover img{ 
    z-index: 1400; 
    position: relative; 
} 

.main:hover bigger{ 
    z-index: 1500; 
    display:block; 
    width: 500px; 
    height: 500px; 
    top: -100px; 
    left: 200px; 
    overflow: visible; 
    visibility: visible; 
    background-color: transparent; 
    clear: none; 
}

THANKS

來源

2010-09-02 Rosemary

HTML的外觀如何？它不應該是'.bigger'而不是'更大'？ – mercator 2010-09-02 10:14:53

它看起來像這樣： <一類= 「主要的」 href = 「＃」> – Rosemary 2010-09-02 18:36:05

/*for bigger images*/ 
.main bigger { width: 500px; height: 500px; position: absolute; left: -2000px; visibility: hidden; overflow: hidden; background-color:transparent; border:0; } 

.main:hover img{ z-index: 1400; position: relative; } 

.main:hover bigger{ z-index: 1500; display:block; width: 500px; height: 500px; top: -100px; left: 200px; overflow: visible; visibility: visible; background-color: transparent; clear: none; }

是更大應該是一個元件或一個類。如果是班級，那應該是。大拇指，對不對？

來源

2010-09-02 10:16:34 sheeks06

沒有想到這一點。應該是兩個....一類涵蓋像這樣包裝的元素：。雖然你可能會找到某些東西，因爲我已經通過w3w xhtml驗證程序驗證了該頁面，並且MSDN所述的其中一個錯誤涉及未聲明。我無法想象爲什麼這會成爲一個問題，雖然如果代碼在Chrome和Firefox的作品。 – Rosemary 2010-09-02 18:34:14

那麼，它取決於文檔類型。 Chrome和Firefox在標記方面更爲寬容。 http://www.w3schools.com/tags/tag_DOCTYPE.asp – sheeks06 2010-09-03 01:09:47

我的文檔類型曾經是嚴格的xhtml 1.0，直到我驗證了頁面並且返回了有關框架的錯誤。然後，我將其更改爲xhtml 1.0過渡。這沒有什麼區別。任何其他建議將有所幫助。 – Rosemary 2010-09-06 11:43:56

它看起來像這樣：<a class="main" href="#"><img src="" /><bigger><img src="" /></bigger></a>

不要那樣做。

<bigger>元素不存在。即使在XHTML中，你也不能僅僅構建自己的元素;無論如何不是無需創建自定義DTD，這可能仍然不會使其在IE中工作，因爲IE不支持XHTML 真的。

Chrome和Firefox在處理無法識別的元素方面比IE8稍微寬鬆一些，這就是爲什麼它在這些方面起作用。

我建議你增加一個bigger類到圖像，而不是：<img src="" class="bigger" />並擺脫<bigger>元素。

來源

2010-09-03 09:07:21 mercator

嗯......試圖創建一個圖像類，適用於Chrome和Firefox，但不是IE8。可見性也失敗。在這一點上，沒有圖像課可能會對我有利。有了它，IE8並不像有些人所說的那樣「優雅」。 – Rosemary 2010-09-03 11:05:11

告訴我，雖然，我檢查了在IE8中使用開發人員工具呈現的代碼，而較大的元素呈現嵌套在作爲。也做了更多的研究和測試，當更大的聲明爲a.main.bigger類時，Chrome和Firefox只會複製IE8錯誤。有了這個，Chrome和Firefox的可視性也就失敗了。 – Rosemary 2010-09-03 11:08:40

這使我相信IE8可能只是讀取我的元素（不是類）作爲一類僞元素。當更大的聲明爲一個類或像這樣的僞元素時，Chrome和Firefox會同樣失敗：a.main.bigger或a.main :: bigger。 – Rosemary 2010-09-03 11:10:11

IE8，定位和懸停不起作用

回答

相關問題