google-chrome - CSS3 转换、分层和诊断

Question

我最近一直在开发一个微型网站，该网站使用 CSS3 中一些较新的 3D 效果转换。然而，我一直试图在分层方面变得有点过于棘手，以便某些视觉错觉生效，这一直是许多头痛的原因......

一般来说，在 Chrome(但不是 Firefox，还没有尝试过 Safari 或 IE)中存在这个问题，所有内容似乎都在屏幕上适本地“呈现”，但是当我去点击一个链接或突出显示其中一个中的一些文本时“棘手的分层”区域越多，我的光标就会变软，我无法获得任何功能。我可以看到一切都很好，只是有一堵看不见的墙阻止了我的光标进行交互，如果这有助于解释的话。

在不粘贴一英里长的实验代码的情况下，有谁知道可能导致此问题的原因是什么？我最好的猜测是 z-index 继承在某个时候出了问题，但很难诊断......导致我的下一个问题是是否有人知道分层诊断的任何好的策略(工具在这里也很棒)!

我当然精通标准开发工具/Firebug...

谢谢大家!

Answer 1

好的，所以我解决了我的问题并提出了以下策略以供将来在诊断分层问题时引用...

1. 检查可能相互干扰的所有元素的谨慎 Z-Index 值。如有必要，重新订购它们，看看是否能解决问题。如果没有，请继续。
2. 检查步骤 1 中所有元素的谨慎定位。确保它们在 CSS 标记中声明为具有“position: absolute”或“position: relative”。不要依赖继承/默认值。绝对声明是关键。
3. 检查您的“backface-visibility”值。如果您的设置很复杂，则很容易搞不清楚是什么。

遵循这种模式最终为我做到了。我的问题原来是所有 3 个问题的组合，但在我按照上述步骤操作之前，它们不一定会向我展示。