Chrome是否会退化有关z-indexes（或者我做错了什么）？ [英] Is Chrome regressing regarding z-indexes (or what am i doing wrong)?

问题描述

我在制作的网站的导航栏中有3个标签，其中每个相应的内容都会点击。

我刚刚意识到它没有在 Chrome 22 上工作（尽管我90％确定我在一年前在网站上线时在Chrome上进行了测试），但在 IE9 和 FF16 。

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

正如您所看到的，只有3的最后一个选项卡可以在 Chrome 22 上悬停（因此点击）。
就像Chrome为每个 .tab-container 创建了一个新的z-index堆栈，而不是只显示所有包含 z-index的元素： 21 >其他内容。

所有元素都是 position：fixed 或 position：absolute 并且我看不到有什么不对，有人吗？

解决方案 div>

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

这种行为是故意的在Chrome 22中引入。 position：fixed 的框将在基于WebKit的浏览器中创建新的堆叠上下文，而不管它们是否为 z-index



更多内容这里。据说它被提议作为对CSS2.1规范的修订来帮助移动实现（在移动WebKit浏览器中已经发生了相同的行为）;它在某种程度上在这组会议记录但是我没有看到任何实际的规格变化 - 事实上，工作组尚未达成共识。



我认同微软的兼容性问题;我可以看到这打破了现代网站的相当大一部分。这个问题由于环境变化而变得更加严重，并且完全依赖于受影响的布局的性质，正如这里的其他答案所表明的那样。


The nav of a website i have in production works as 3 tabs, each of the 3 corresponding content coming forward on click.

I just realized it doesn't work on Chrome 22 (although i'm 90% sure i tested it on Chrome a year ago when the site was brought online), but is perfectly fine on IE9 and FF16.

Here is a summary of my problem : http://jsfiddle.net/be7mQ/3/

As you can see, only the last tab of the 3 can be hovered (and therefore clicked) on Chrome 22. It's like Chrome created a new z-index stack for each .tab-container instead of just showing all elements with z-index:21 above the rest of the content.

All the elements are either position:fixed or position:absolute and i can't see what's wrong there, anyone?

解决方案

It's like Chrome created a new z-index stack for each .tab-container instead of just showing all elements with z-index:21 above the rest of the content.

This behavior was deliberately introduced in Chrome 22. Boxes with position: fixed will create new stacking contexts in WebKit-based browsers regardless of their z-index, causing the behavior you're currently seeing.

More on that here. It is said that it is being proposed as a revision to the CSS2.1 spec to aid mobile implementations (the same behavior already occurs on mobile WebKit browsers); it was addressed to some extent in this set of minutes but there hasn't been any actual change to the spec yet as I've seen — indeed; the working group hasn't reached a consensus yet.

I for one agree with Microsoft's compatibility concerns; I can see this breaking a sizable portion of modern sites. The problem is exacerbated by workarounds basically being situational and totally dependent on the nature of the affected layout, as demonstrated by the other answers here.

这篇关于Chrome是否会退化有关z-indexes（或者我做错了什么）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！