html - 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

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

根据 Mozilla绝对定位元素是positioned relative to their closest positioned ancestor :

The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.

在 Chrome 检查器中添加这段代码解决了我这边的问题:

#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;
}

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