日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

關(guān)于IE7 z-index的瀏覽器兼容性問(wèn)題完美解決方案

云知道

瀏覽器兼容性問(wèn)題太讓人蛋疼了，今天可是廢在了IE7的z-index問(wèn)題上 ?？捎植荒芤?yàn)闉g覽器版本低而不去解決，畢竟要從用戶的角度著想 。百度了好多還是無(wú)法解決，最后google了一下，找到了方法 。

直接上例子：

復(fù)制代碼代碼如下:
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


復(fù)制代碼代碼如下:
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;}

這是為什么呢？其實(shí)這是IE瀏覽器的一個(gè)BUG在IE瀏覽器中，定位元素會(huì)產(chǎn)生一個(gè)新的stacking context，并且從z-index的值為0開(kāi)始 。所以我們需要在這個(gè)元素的父元素上設(shè)置一個(gè)更高的z-index值 。

在上述的box1中的父元素container設(shè)置一個(gè)更大的z-index就能解決這個(gè)問(wèn)題 。

復(fù)制代碼代碼如下:
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有沒(méi)有z-index都無(wú)所謂了，但必須同position（relative或absolute）使用,就跟一個(gè)人
//生不了孩子一樣，需要配合 。
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }

要想覆蓋住父級(jí)的同級(jí)，父級(jí)的z-index就必須別的大，這就跟拼老爸一樣，老爸強(qiáng)你就強(qiáng)，這就是傳說(shuō)中的哲學(xué)啊 。

    推薦閱讀