2

我在生产中拥有的网站导航作为 3 个选项卡工作，单击时会出现 3 个相应内容中的每一个。

我刚刚意识到它在Chrome 22上不起作用（尽管我有 90% 的把握在一年前网站上线时在 Chrome 上测试过它），但在IE9和FF16上完全没问题。

这是我的问题的摘要：http: //jsfiddle.net/be7mQ/3/

如您所见，只有 3 个选项卡中的最后一个选项卡可以悬停（并因此单击）在Chrome 22上。就像 Chrome 为每个元素创建了一个新的 z-index 堆栈，.tab-container而不是仅显示所有元素z-index:21的其余内容。

所有元素都是position:fixed或position:absolute，我看不出那里有什么问题，有人吗？

4

5 回答 5

4

就像 Chrome 为每个元素创建了一个新的 z-index 堆栈，.tab-container而不是仅显示所有元素z-index:21的其余内容。

这种行为是在 Chrome 22 中有意引入的。带有 的框position: fixed将在基于 WebKit 的浏览器中创建新的堆叠上下文，无论它们如何z-index，都会导致您当前看到的行为。

更多关于这里。据说它被提议作为对 CSS2.1 规范的修订，以帮助移动实现（移动 WebKit 浏览器上已经发生了相同的行为）；在这组会议记录中，它在一定程度上得到了解决，但正如我所见，规范还没有任何实际的变化——确实；工作组尚未达成共识。

我同意微软的兼容性问题；我可以看到这打破了现代网站的相当大一部分。解决方法基本上是情境性的并且完全取决于受影响布局的性质，从而加剧了该问题，正如此处的其他答案所证明的那样。

于 2012-11-05T18:11:57.927 回答
1

BoltClock 的答案是一个，如前所述，每种情况都需要对此进行特定修复，但这就是我解决自己损坏的网站的方法：

http://jsfiddle.net/be7mQ/13/

即将我以前所有的position:fixeddiv 放在一个唯一的position:fixed父级中，该父级#tabs必须z-index:1在 Chrome22 以外的浏览器上强制使用新堆栈。

这样，在新#tabs元素中，我可以像以前一样自由地使用 z-indexes。

于 2012-11-06T11:00:39.730 回答
0

由于您使用的是固定位置，因此该top: 0属性将使您的最后一个元素悬停在所有其他元素上。不要定位标签元素，而是更改标签容器的顶部，如下所示。

将您的 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;
}​

小提琴

于 2012-11-05T18:12:40.663 回答
0

因为你正在使用

height: 100%

在 .tab-container{ 上，最后一个与其他所有内容重叠，因此只有第三个（最后一个）用于悬停。尝试从标签容器的 css 中删除 height: 100% 。有用！

于 2012-11-05T18:19:22.657 回答
0

height: 100%从中删除.tab-container。第三个选项卡的高度覆盖了前两个选项卡。当我在你的小提琴中这样做时，它们都是可点击的。

于 2012-11-05T18:15:59.273 回答