我在生产中的网站的导航用作 3 个选项卡，点击时会出现 3 个相应内容中的每一个。
我刚刚意识到它不适用于Chrome22(尽管我90%确定一年前当该网站上线时我在Chrome上测试过它)，但在IE9和FF16上完全没问题。
以下是我问题的摘要： http://jsfiddle.net/be7mQ/3/
如您所见，只有 3 的最后一个选项卡可以悬停(因此单击)在Chrome 22上。 这就像Chrome为每个.tab-container创建了一个新的z-index堆栈，而不仅仅是显示所有元素，z-index:21高于其余内容。
所有元素要么position:fixed要么position:absolute，我看不出那里有什么问题，有人吗？
这就像Chrome为每个
.tab-container创建了一个新的z-index堆栈，而不仅仅是显示所有元素，z-index:21高于其余内容。
此行为是在 Chrome 22 中故意引入的。带有position: fixed的框将在基于 WebKit 的浏览器中创建新的堆叠上下文，无论其z-index如何，从而导致您当前看到的行为。
更多关于这一点的信息 这里.据说它被提议作为对 CSS2.1 规范的修订以帮助移动实现(相同的行为已经发生在移动 WebKit 浏览器上);在这组几分钟中，它在某种程度上得到了解决，但正如我所看到的，规范还没有发生任何实际变化——事实上;工作组尚未达成共识。
我同意Microsoft的兼容性问题;我可以看到这打破了现代网站的很大一部分。解决方法基本上是情境化的，并且完全取决于受影响布局的性质，使问题更加严重，如此处的其他答案所示。
BoltClock 的答案就是一个，如前所述，每种情况都需要对此进行特定的修复，但这就是我解决自己损坏网站的方式：
http://jsfiddle.net/be7mQ/13/
即将我之前的所有position:fixeddiv 放在一个只有position:fixed父#tabs中，该父z-index:1在 Chrome22 以外的浏览器上强制使用新堆栈。
这样，在新的#tabs元素中，我可以像以前一样自由地再次使用 z 索引。
从.tab-container中删除height: 100%。 第三个选项卡的高度掩盖了前两个选项卡。 当我在你的小提琴中这样做时，它们都是可点击的。
由于您使用的是位置固定，因此top: 0属性将使最后一个元素悬停在所有其他元素上。不要定位 tab 元素，而是更改 tab 容器的顶部，如下所示。
将您的 HTML 更改为
<div class="tab-container info">
<div id="info" class="tab">I<br/>N<br/>F<br/>O</div>
</div>
<div class="tab-container news">
<div id="news" class="tab">N<br/>E<br/>W<br/>S</div>
</div>
<div class="tab-container shop">
<div id="shop" class="tab">S<br/>H<br/>O<br/>P</div>
</div>
和您的 CSS 到
.info{
top:0px;
}
.news{
top:100px;
}
.shop{
top:200px;
}
小提琴
因为你正在使用
height: 100%
在 .tab-container{ 上，最后一个与其他所有内容重叠，因此只有第三个(最后一个)用于悬停。尝试从选项卡容器的 css 中删除高度：100%。它有效！