Question

我一直在与项目上的z-index问题作斗争，有一件事我注意到现代浏览器会触发浮动元素的z-index行为，以及具有position：relative或absolute的元素。这似乎与W3C规范相矛盾：

“适用于：具有'absolute'或'relative'类型的'position'属性的元素。”

这是一个测试用例：

CSS：

#tabContent{
    border:1px solid #ccc;
    padding:15px;
    margin-top:-1px;
    margin-bottom: 1.5em;
    background: #fff;
    }
p.tabHolder {
    overflow: hidden;
    height: 1%;
    margin: 14px 0 0px 0;
}
p.tabHolder a {
    display: block;
    margin:0 2px 0 0;
    padding: 6px 11px;
    float: left;
    background: #eee;
    border:1px solid #bbb;  
}
p.tabHolder a.active {
    background-color: #fff;
    border-bottom-width:0px;
    color:#333;
    padding-top: 7px;
    z-index: 100; 
}

HTML：

        <p class="tabHolder">
        <a class="active" href="#">Foo</a>
        <a href="#">Bar</a>
    </p>
    <div id="tabContent">
        <p>Lorem ipsum</p>
    </div>

如果你在IE8中加载它并切换兼容性视图按钮，你会发现在IE8中z-index可以正常工作，但在IE-7中却没有。

任何人都能解释一下吗？

Answer 1

浏览器是符合某些范围的标准，甚至可以根据它们符合的标准规格而变化。此外，浏览器具有某些特有的功能集，并且不属于任何W3C标准。

这就是为什么在开发网络时，你必须在非常有针对性的浏览器上进行测试。

Answer 2

也许我误解了这个问题，但如果你用#tabContent替换你的样式规则

#tabContent{
    border:1px solid #ccc;
    padding:15px;
    margin-bottom: 1.5em;
    background: #fff;
    width:80px;
    margin-top:-10px;
    z-index:50;
    float:left;
}

或

#tabContent{
    border:1px solid #ccc;
    padding:15px;
    margin-bottom: 1.5em;
    background: #fff;
    width:80px;
    margin-top:-10px;
    z-index:50;
    position:absolute;
    top:10px;
    left:20px;
}

然后您将看到重叠的框，其行为就好像.active没有z-index，在所有浏览器中看起来都一样。

为浮动元素触发z-index

2 个答案: