css - 使用 box-sizing :border-box; 计算填充百分比的奇怪行为

Question

使用fiddle设置测试用例: http://jsfiddle.net/5M7X7/2/

我有一个喜欢的元素，可以显示一些 border-box 布局。我看到分层 block 元素的奇怪(但跨浏览器一致)行为。

按照这个例子，有 3 个 div:第一个有固定的高度和宽度，它的 child 有 100% 的高度和宽度，加上两侧的 % 填充，它的 child 有 100% 的高度和宽度。

垂直填充是使用宽度计算的。这是 border-box 的一些故意怪癖吗？是否有使用 css 使其表现“如我所料”的布局技巧，使用高度来计算垂直填充？

我不需要 JS 解决方法，也不需要其他方法来调整我最小的盒子的大小。我对这种特殊的布局怪癖很感兴趣，它为什么会发生，以及是否有一种纯粹、简单的 css 方式让它“表现出来”。

编辑 显然，填充 % 是按宽度的百分比计算的，无论您使用的是哪种框大小。在我作为前端开发人员的这些年里，我从来没有遇到过这种情况。如果有人知道一个好的解决方法，我会洗耳恭听。

谢谢!

Answer 1

This is actually part of the CSS spec ，所以这种行为是正确的，应该与您的预期一致。

如果您想解释为什么，他们实际上并没有提供，但推测这是因为父高度取决于子高度，而子高度会受到填充百分比的影响.

编辑:为了扩展这一点，宽度计算不依赖于 child 的盒子模型；如果未指定，子项的宽度可以超出父项。

span, div {
    display: inline-block;
    border: 1px solid black;
}
span span {
    padding: 50%;
}
<span><span>foon</span></span>
<div><div>foon</div></div>

http://jsfiddle.net/XHDEL/