1. 首頁 > 生活經驗 > >

關于IE7 z-index的瀏覽器兼容性問題完美解決方案

瀏覽器兼容性問題太讓人蛋疼了 ， 今天可是廢在了IE7的z-index問題上 。可又不能因為瀏覽器版本低而不去解決 ， 畢竟要從用戶的角度著想 。百度了好多還是無法解決，最后google了一下 ， 找到了方法 。

直接上例子：

復制代碼代碼如下:
div id="container"
div id="box1"This box should be on top/div
/div
div id="box2"
This box should not be on top;
IE however seems to create a new stacking context for positioned elements,
even when the computed z-index of that element is ’auto’.
/div


復制代碼代碼如下:
body { margin: 0; padding: 0; }
#container { position: relative;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:20; }
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 10;}

這是為什么呢？其實這是IE瀏覽器的一個BUG在IE瀏覽器中，定位元素會產生一個新的stacking context，并且從z-index的值為0開始 。所以我們需要在這個元素的父元素上設置一個更高的z-index值 。

在上述的box1中的父元素container設置一個更大的z-index就能解決這個問題 。

復制代碼代碼如下:
body { margin: 0; padding: 0; }
#container { position: relative; z-index:30;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; }
//box1有沒有z-index都無所謂了，但必須同position（relative或absolute）使用,就跟一個人
//生不了孩子一樣 ， 需要配合 。
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }

要想覆蓋住父級的同級，父級的z-index就必須別的大 ， 這就跟拼老爸一樣，老爸強你就強，這就是傳說中的哲學啊 。

相關經驗推薦