html - 带有 960px 容器的全宽图像

Question

我在一个部分中有一个全宽图像和标题，如下所示:

<section id="featured">
    <img src="images/featured.jpg" alt="My Image">
    <div class="container">
        <div class="caption">
            <h1>Here's a title</h1>
            <p>With a caption</p>
        </div>
    </div>
</section>

这是 CSS:

#featured {
    width: 100%;
}
.container {
    position: relative;
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
}
.caption {
    display: block;
    position: absolute;
    bottom: 24px;
    left: 0;
}

容器位于图像下方，高度为零。这可确保标题与正文的其余部分保持一致。当您减小视口(viewport)宽度时，它也适用于媒体查询。

我的问题:高度为零的容器有什么问题吗？这会阻止字幕在某些设备上显示吗？它在 IE7+ 和 iPad2 中完美运行。

我见过开发人员没有使用容器，而是纯粹在标题上使用绝对定位的例子。这意味着您必须设置多个断点，我希望避免这种情况。

您可以在此处查看工作版本:http://bit.ly/1txE7Zi

Answer 1

根据 W3，绝对定位的元素将缩小以适合其内容。您还可以设置 top 和 bottom 属性，或设置 height 属性来为容器指定一个高度。

http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Specifying_dimensions