浏览器兼容性问题太让人蛋疼了,今天可是废在了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就必须别的大,这就跟拼老爸一样,老爸强你就强,这就是传说中的哲学啊 。
推荐阅读
- IE7 mode IE8兼容视图与独立IE7的区别详解
- IE7和IE8的兼容性问题
- IE7,6与Fireofx CSS对浏览器的兼容性性处理
- DIV+CSS相对IE6 IE7和IE8浏览器行为区别及兼容性问题整理
- 关于艺术与宗教的关系,正确的有
- 关于NOKIA 7370开盖自动关机的解决办法
- IE7兼容模式可以解决IE8 FF浏览器下出现文字重叠问题
- 关于D828的待机发热问题的解决办法
- 关于Nokia8800桌面充电器的使用说明
- 关于IE8兼容:X-UA-Compatible属性的解释