html - 在伪元素上堆叠 div、z-index 和 box-shadow

Question

出于某种原因，我不明白为什么我尝试在标题元素上应用的框阴影在 Firefox 中无法正确呈现。

这是活生生的例子: http://dev.longbeachrecords.de/bands/nh3-2/

阴影在右侧和左侧的内容部分效果很好，但奇怪的是标题元素却不行。

我希望有人能把我引向正确的方向。提前致谢。

Answer 1

首先you have some critical errors .现在的浏览器尝试纠正它们，但结果不一定是您期望的结果，这使得查找 CSS 错误变得稍微困难​​一些，因此请注意正确的代码验证。

至于你的问题，这里是解决方案...

添加这个:

.entry-header {
    position: relative;
    z-index: 21;
}

因为这个元素应该在 div.page-header-image-single 上面，它有 z-index: 20。然后从h1.entry-title, h1.page-title

中删除 z-index: 51属性

不要忘记在您的 style.css:124 中取消注释 h1.entry-title:before,h1.page-title:before