全宽图像与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;
}

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

我的问题：高度为零的容器有什么问题吗？这可以防止标题在某些设备上显示吗？它在IE7 +和iPad2中完美运行。

我见过开发人员没有使用容器的例子，但绝对定位纯粹是在标题上。这意味着您必须设置几个断点，我宁愿避免这些断点。

您可以在此处查看有效版本：http://bit.ly/1txE7Zi

Answer 1

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

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

Answer 2

根本不应该是一个问题。它只有0px的高度，因为它的孩子绝对定位。它不应该在设备上显示不正确。