rez*_*zna 163 css z-index internet-explorer-7
我已经分离了一个IE7 z-index错误的小测试用例,但不知道如何修复它.我z-index一整天都在玩.
z-indexIE7有什么问题？
测试CSS:
input {
border: 1px solid #000;
}
div {
border: 1px solid #00f;
}
ul {
border: 1px solid #f00;
background-color: #f00;
list-style-type: none;
margin: 0;
padding-left: 0;
z-index: 1000;
}
li {
color: #fff;
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
span.envelope {
position: relative;
}
span.envelope ul {
position: absolute;
top: 20px;
left: 0;
width: 150px;
}
测试HTML:
<form>
<label>Input #1:</label>
<span id="envelope-1" class="envelope">
<input name="my-input-1" id="my-input-1" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</span>
<br><br>
<label>Input #2:</label>
<span id="envelope-2" class="envelope">
<input name="my-input-2" id="my-input-2" />
</span>
</form>
Eam*_*nne 268
Z指数不是绝对指标.具有z-index:1000的元素可能位于具有z-index的元素后面:1 - 只要各个元素属于不同的堆叠上下文.
当您指定z-index时,您将相对于同一堆叠上下文中的其他元素指定它,尽管CSS规范的Z-index段落表示仅为具有z-index以外的定位内容创建新的堆叠上下文自动(意味着您的整个文档应该是单个堆叠上下文),您确实构建了一个定位的跨度:不幸的是,IE7将没有z-index的定位内容解释为新的堆叠上下文.
简而言之,尝试添加此CSS:
#envelope-1 {position:relative; z-index:1;}
或重新设计文档,使您的跨度没有位置:相对更长时间:
<html>
<head>
<title>Z-Index IE7 Test</title>
<style type="text/css">
ul {
background-color: #f00;
z-index: 1000;
position: absolute;
width: 150px;
}
</style>
</head>
<body>
<div>
<label>Input #1:</label> <input><br>
<ul><li>item<li>item<li>item<li>item</ul>
</div>
<div>
<label>Input #2:</label> <input>
</div>
</body>
</html>
有关此错误的类似示例,请参见http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/.给出父元素(在你的例子中为envelope-1)更高的z-index工作的原因是因为那时envelope-1的所有子节点(包括菜单)将与envelope-1的所有兄弟节点(特别是envelope-2)重叠.
虽然z-index允许您明确定义事物的重叠方式,但即使没有z-index,也可以很好地定义分层顺序.最后,IE6还有一个额外的错误,导致selectboxes和iframe浮动在其他所有内容之上.
小智 15
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
ed1*_*nh0 11
在IE中,定位元素生成一个新的堆叠上下文,从z-index值为0开始.因此,z-index无法正常工作.
尝试给父元素一个更高的z-index值(甚至可以高于孩子的z-index值本身)来修复bug.