为什么即使使用box-sizing：border-box，height：0也不会隐藏我填充的<div>？

我有一个<div>填充。我已将其设置为height: 0，并给了overflow: hidden和box-sizing: border-box。

的HTML

<div>Hello!</div>

的CSS

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0;
    overflow: hidden;

    padding: 40px;

    background: red;
    color: white;
}

http://jsfiddle.net/FA29u/2/

据我了解，这应该会使它<div>消失。

但是，它仍然可见（在Mac上的Chrome 31和Firefox 25中）。尽管height声明，该声明似乎并不适用于填充box-sizing。

这是预期的行为吗？如果是这样，为什么？MDN页面上box-sizing似乎没有提到此问题。

据我所知，规范也没有—它使我读起来像宽度和高度都应在box-sizing: border-box（或实际上padding-box）设置时包含填充。

的确切定义border-box是：

也就是说，在元素上指定的任何填充或边框都将在此指定的宽度和高度内进行布局和绘制。内容的宽度和高度是通过从指定的“宽度”和“高度”属性中减去各边的边框和填充宽度来计算的。

所以你修改高度的宽度属性，但padding并border不会改变。

由于内容的宽度和高度不能为负（[CSS21]，第10.2节），因此此计算的下限为0。

然后，如果height为0，则无法使填充位于内部，因为这意味着高度将为负数。

应用的声明height: 0;。如果将其保留在height: auto;，您会看到20px的差异（带有“ Hello！”的行的高度），使其总高100px。高度设为零时，高度只有80px：padding-top + padding-bottom = 80px

答案是：是的，这是预期的行为。

您可以将width和height设置为介于0和之间的任何值80px（如果您有40px的填充），并且仍然获得相同的尺寸。

更新：如Hardy所述，使用附加的包装div可解决此问题。

演示版

HTML：

<div class="div-1">
    <div class="div-2">
        Hello!
    </div>
</div>

CSS：

.div-1 {
    padding: 40px;

    /* This is not visible! */
    border: 1px solid dashed;
}
.div-2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0px;
    width: 0px;
    background: red;
    color: white;
    overflow: hidden;
}