IE 8 Z-index 堆疊問題

Question

http://carettaworkspace.spirecms.com

在 IE 8 中，幻燈片右側按鈕內的文本和縮略圖堆疊在空白區域上方，可以單擊以控制幻燈片。 在其他瀏覽器中，整個區域都可以在按鈕內單擊以更改幻燈片。

我知道 IE 7 和 8 在 Z-index 堆疊方面很特別，我嘗試了許多常見的修復方法（為父 div 設置 z-index，以不同方式定位父 div），但我無法解決問題。 有誰知道可以解決此問題的解決方案？

所以你知道，幻燈片的文本和圖像在 slidethumbs div 下。 空鏈接可以在slidearea -> anythingControls div 下找到。

任何幫助深表感謝。 謝謝！

Answer 1

解決方案分為兩部分：首先，我需要稍微重新排序 HTML 以獲得同一父 div 下的兩個問題層。 這允許我為父 div 和子 div 設置 z-index 以使 IE 玩得更好。 其次，我發現 IE 不允許在文本或圖像上方的 function 上使用空 div。 奇怪，所以。 我最終給了 div 一個 1px x 1px 不重復的背景圖像，所以它在技術上並不是完全空的，這完全解決了這個問題。 IE8 允許 div 位於圖像和文本區域之上。

Answer 2

如果不重新訂購 HTML / CSS，我認為您無法做到。 沒有在 IE（在 Mac 上）中查看它，但這里是解釋：

在 IE 中，堆棧上下文由設置了position的任何內容定義。 所以你的.anythingSlider定義了一個堆疊上下文，你的導航不能超過縮略圖。

基本上，z-index 僅上升到具有堆疊上下文的最近元素。 在大多數瀏覽器中，上下文由具有 (positioning + z-index) 或 (opacity < 1) 的任何內容定義。

僅供參考，我通常做的是在所有有定位設置的東西上設置z-index: 1 。 處理起來有點煩人，但所有瀏覽器的行為都是一樣的。