html - 为 float 元素触发的 z-index

Question

我一直在与元素中的 z-index 问题作斗争，我注意到现代浏览器会在 float 元素以及具有位置的元素上触发 z-index 行为:相对或绝对。这似乎与 W3C 规范相矛盾，该规范规定:

“适用于:‘position’属性类型为‘absolute’或‘relative’的元素。”

这是一个测试用例:

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 中加载它并切换兼容性 View 按钮，您将看到 z-index 在 IE8 中有效，但在 IE-7 中无效。

谁能解释一下？

Answer 1

浏览器在一定程度上符合标准，甚至在它们符合的标准规范方面也有所不同。此外，浏览器具有某些独特的功能集，不属于任何 W3C 标准。

这就是为什么在为网络开发时，您必须在非常目标的浏览器上进行测试。