云南龙网

  1. 首页 > 云知道 > >

ie下的css层叠z-index各种问题详细整理( 三 )

云知道


ie下的css层叠z-index各种问题详细整理


为具有 relative 属性的顶级祖先元素打了鸡血(加了z-index)后 ， IE6下终于正常显示了 。这个问题很现实的教育了我们 - 在拼爹拼不过的条件下我们只能靠自己努力...
IE6下拼爹的问题也就是我在实际开发中碰到的问题 ， 现在已经完美解决且达到需求的效果了 。接下来要介绍的是一些我总结的资料 ， 都是介绍在IE环境下得各种z-index的坑 。
2.万恶的float
float 是 css 的定位属性 ， 而且应该是CSS中最常用的属性之一了 ， 至于为什么说它万恶等我改天去准备一篇文章单独进行解说 ， 在这里借着以前的学习笔记简单说几点：
1. IE7 中 ， 底边距 bug是当浮动父元素有浮动子元素时 ， 这些子元素的底边距会被父元素忽略掉；
2.3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素 ， 好像浮动元素的周围有一个奇怪的力场一样；
3.双倍边距bug处理 IE6 时 ， 另一个需要记住的事情是 ， 如果在和浮动方向相同的方向上设置外边距(margin) ， 会引发双倍边距 。
有关float的扫盲就先到这里 ， 还有一点就是float毕竟是标准的属性 ， 而且大多数的前端都习惯用它去实现页面 ， 所以我的建议就是：深入理解 HTML语义和表现 。
接着开始讲述 z-index和float 在IE6环境下擦出的坑爹的火花...先上一段代码：

复制代码代码如下:
div style="background:#000;width:100%;height:600px;opacity:0.3; filter:alpha(opacity=30);position:absolute;left:0;top:0;z-index:1;overflow:hidden;"/div
div style="position:relative;z-index:100;"
img src="/images/defaultpic.gif" /
/div

看到img有设置float属性 ， 上面这段代码显示的效果与IE6下拼爹失败一样 ， IE6下的犀牛书是灰色的 T.T。为了让犀牛书正常显示 ， 只需要把img的float属性去掉即可 。个人理解可能是因为img的float使得z-index失效造成的 。网上还有种说法是因为float和relative两者在定位上问题 ， 所以一起使用的时候会造成此bug 。
这个问题又教育了我们 - 某些环境(IE6)下也要小心被兄弟坑...
IE6下 select z-index无效而遮挡div
这个问题其实在是比较常见的了 ， 我早期做项目的时候有幸遇见过这个问题 ， 所以有现成的资料 ， 趁着这次也刚好整理整理、回忆回忆 。两个解决办法都是围绕iframe展开的 ， 咱们先来看第一个 。
1.用 iframe 包裹 select 元素
使用iframe包住select ， 这样iframe可以有z-index ， 只要在div上设置的z-index比iframe的高即可实现 。示例代码如下：

复制代码代码如下:
iframe style="z-index:1;position: absolute; "
select name="me"
option value="https://www.rkxy.com.cn/dnjc/name"Darren聂微东/option
option value="https://www.rkxy.com.cn/dnjc/sex"male/option
option value="https://www.rkxy.com.cn/dnjc/age"secret/option
/select
/iframe

2.以 Iframe 作为div的子元素 ， 覆盖 select 元素(推荐使用)
建立一个跟div同宽同高的iframe ， 并且z-index比div要低 。

复制代码代码如下:
style type="text/css"
#iframe{
position: absolute;
width: 100%;
height: 100%;
z-index:-1;
}
.text_div{
position: absolute;
left:100px;
top:50px;
width: 300px;
height: 200px;
background : blue;
z-index:100;
}
/style
div class="text_div"
span这里可以包含其他dom元素/span
iframe id="iframe"/iframe
/div
注:在这里如果不加src属性,尽管iframe会把select挡住,但是由于默认iframe为白色,会影响原来的div背景色 。解决方法可以加了一个空的HTML文件 ， 并把body 的值设为和原来div背景色一致,这样就解决了默认白色背景色的问题 ， 这里只是一种思路 ， 办法总比困难多^_^ 。本文结语

推荐阅读


上一篇：使用软件图标提取工具提取图标的操作方法

下一篇：禹初名字寓意