z-index cross-browser 不兼容

Question

这是CodePen一个很短的简单代码。

only html and css, and Bootstrap

它显示了一个非常基本的 Bootstrap 旋转木马，添加了白色透明覆盖层。轮播标题应该出现在叠加层的顶部，但它在 Chrome 浏览器中的显示方式并非如此。不过，Firefox 正在按预期显示它。

我希望文本在所有浏览器上滑动并显示在静止覆盖图的顶部。

Answer 1

为什么不使用：

CSS

.carousel-inner > .item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 1;
    opacity: 0.5;
}

而不是单独的 overlay 容器？ 我的意思是这个容器的 CSS 中甚至有一个 content: ''，所以我猜它曾经是或应该是一个伪元素。