h2元素在iOS和Firefox上的顶部图像上都蜷缩着

Question

在网站Codexr.io上我注意到虽然h2元素适用于Chrome的任何大小的浏览器,但是我在iOS Safari和Firefox中看到,所有的h2都在其中一个主要图像中相互叠加.

这是HTML:

<div class="content">
    <p><a href="http://codexr.io/collaborative"><img alt="" height="450" src="/sites/default/files/workplace-1245776.jpg" width="800"></a></p>
    <h2 class="top-area-text">Collaborative</h2>
</div>

而CSS:

#top-area .top-area-text, #top-area .region-top-fifth h2, #top-area .region-top-fifth h2 {
    left: 0;
    text-align: center;
    top: 4em;
    width: 100%;
    color: white;
    font-size: 3em;
    text-shadow:
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    text-transform: uppercase;
}

#top-area .top-area-text {
    position: absolute;
}

有什么我想念的吗？为什么Chrome可以运行但Firefox和iOS不行？有什么不正确的吗？

Answer 1

问题是父 div 上position: absolute;没有 a 。position: relative;我不知道为什么 Chrome 中没有发生这种情况。也许有些东西被缓存了？我在 Chrome 中访问您的网站时也遇到了问题。

根据Mozilla 的说法，绝对定位元素是相对于其最接近的定位祖先定位的：

该元素从正常文档流中删除；不会为页面布局中的元素创建空间。相反，它是相对于其最近定位的祖先（如果有）进行定位的；否则，它是相对于初始包含块放置的。它的最终位置由 top、right、bottom 和 left 的值确定。当 z-index 的值不是 auto 时，此值会创建一个新的堆栈上下文。绝对定位的盒子可以有边距，并且它们不会与任何其他边距折叠。

在 Chrome 检查器中添加此代码解决了我的问题：

#top-area .content {
    position: relative;
}

这基本上复制了您网站上的问题并显示了如何解决它：

#top-area .content {
    position: relative;
}

#top-area .top-area-text, #top-area .region-top-fifth h2, #top-area .region-top-fifth h2 {
    left: 0;
    text-align: center;
    top: 4em;
    width: 100%;
    color: white;
    font-size: 3em;
    text-shadow:
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    text-transform: uppercase;
}

#top-area .top-area-text {
    position: absolute;
}

/* Remove this code to reproduce the issue on your site. */
#top-area .content {
    position: relative;
}