Question

出于某种原因，min-height的嵌套元素在某些浏览器中不会继承祖父母的高度。

<html style="height: 100%">
    <body style="min-height: 100%">
        <div style="min-height: 100%; background: #CCC">
            <p>Hello World</p>
        </div>
    </body>
</html>

我没有在不同浏览器版本之间进行太多测试，但是在Chrome 26和Opera 12.14中，它显示为我所期望的，灰色背景覆盖左上角的Hello World大部分屏幕。

但是，在IE 9和Firefox 20中，灰色背景只是单行文本的高度进一步测试，添加：

对div的

position: relative 没有任何改变 div上的 min-height: inherit 也没有任何改变 position: absolute 会更改宽度，但除了IE 9之外，所有上述浏览器中height都是100％，其中背景仅涵盖文字。
position: fixed 与position: absolute类似，但IE 9恢复为100％宽度的原始行为。
float: left 与position: absolute类似，但Firefox 20也会缩小背景以仅覆盖文字。

来自http://www.w3.org/TR/CSS2/visudet.html#the-height-property：

如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未完全定位，则值计算为“auto”

min-height是否被认为是明确的？我认为这是浏览器之间的混淆。使用position: absolute，它修复了Firefox，并且只有IE 9具有意外行为（这不是意料之外的，是IE）。

是否可以在主要浏览器中保持这种一致性？

请不要建议需要JavaScript的答案，或者具有固定高度的正文。我知道这些是可能的解决方法，但不是我想要实现的。使用position: absolute也会破坏我的布局，因为它将元素拉出流，并且在动态大小的元素下方定位，唯一的解决方法是JavaScript。

Answer 1

首先，你的观察：

在Chrome 26和Opera 12.14中，它按照我的预期显示，灰色背景覆盖左上角的Hello World大部分屏幕。

似乎不正确，在我的Chrome版本26中，它只显示单行文本高度的灰色背景。（就像Firefox和IE9一样）。根据您引用的w3规范，我认为完全正确，因为未明确指定包含body的{{1}}的高度。

您可以使用div，display: table和display: table-row执行某些操作。那时你根本不需要display: table-cell。我在 Chrome 26 ， Safari 5.1.7 ， Firefox 20 ， IE10 中对此jsFiddle进行了测试， IE9模式下的IE10 ，IE8模式下的 IE10 并且在所有这些浏览器中渲染完全相同，在IE7模式下使用 IE10时会开始中断< /强>

<强> CSS

min-height

CSS：使嵌套的最小高度保持一致

1 个答案: