【转】关于IE7 z-index问题完美解决方案
来源:http://jacobcookie.iteye.com/blog/1876426
浏览器兼容性问题太让人蛋疼了,今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决,毕竟要从用户的角度着想。百度了好多还是无法解决,最后google了一下,找到了方法。
直接上例子:
Html代码代码:
<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>
Css代码代码:
body { margin:; padding:; }
#container { position: relative;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:; }
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index:;}
效果:……(就是没有实现z-index所指的效果呵呵)
这是为什么呢?其实这是IE浏览器的一个BUG——在IE浏览器中,定位元素会产生一个新的stacking context,并且从z-index的值为0开始。所以我们需要在这个元素的父元素上设置一个更高的z-index值。
在上述的box1中的父元素container设置一个更大的z-index就能解决这个问题。
修改后的css代码代码:
body { margin:; padding:; }
#container { position: relative; z-index:;}
#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:; }
效果:……(就是实现了z-index属性所指的效果了呵呵)
要想覆盖住父级的同级 ,父级的z-index就必须别的大,这就跟拼老爸一样,老爸强你就强,这就是传说中的哲学啊。
=================================================================
下面来自:http://blog.sina.com.cn/s/blog_77187555010133cv.html
=================================================================
================================================================
下面来自:http://zhidao.baidu.com/link?url=x0uD04htpjH7JnMVukwHI4cI-9X-2GkEqHKWb0z9y-OTHTujieKO5cI2tbLm0hxQSHgl-LekmaUz6POdT-k3C_
================================================================
E6和IE7有一个bug,如果只是对一个子元素设定z-index,这个值再高,也不能覆盖与父元素同级的其他元素。所以现在通用的解决方法是对子元素的父元素也定义一个z-index的值。例如这样
<body>
<div class="container">
<div class="test"></div>
</div> </body> 假如你已经定义了 .test {position:absolute; z-index:9999;},如果要让这个样式在IE6、IE7下面生效的话,就还要在container的div里面加一句:
.container {z-index:100;}
如果container还有一个父元素,就要在那个父元素上也定义一个z-index的值才行。。。
最新文章
- HTML DOM 介绍
- JavaWeb学习总结(五十)——文件上传和下载
- 一键QQ聊天与一键加群QQ功能
- nginx编译参数集合
- AndroidStudio中 R文件缺失的办法
- DELL R720服务器安装Windows Server 2008 R2 操作系统图文详解
- Ubuntu 11.10 安装GMONE3,卸载 UNITY和UNITY 2D
- javascript实现图片无缝滚动(scrollLeft的使用方法介绍)
- 15、手把手教你Extjs5(十五)各种Grid列的自定义渲染
- bzoj 2565: 最长双回文串
- Math工具类
- Recurrent Neural Network[Content]
- 关于 Shell 的相关概念和配置方法,全在这儿了!
- Android - Resource 之 String 小结
- R基本图形示例及代码(持续收集)
- Swift5 语言指南(二十五) 自动引用计数(ARC)
- C++ main()函数及其参数
- 重点:怎样正确的使用QThread类(注:包括推荐使用QThread线程的新方法QObject::moveToThread)
- DataStage 七、在DS中使用配置文件分配资源
- 1014 我的C语言文法定义与C程序推导过程