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

Question

使用小提琴设置测试用例： http://jsfiddle.net/5M7X7/2/

我有一个宠物项目，可以调整一些 border-box 布局。我看到分层块元素的奇怪（但跨浏览器一致）行为。

根据示例，有 3 个 div：第一个具有固定的高度和宽度，其子级具有 100% 的高度和宽度，加上两侧的 % 填充，其子级具有 100% 的高度和宽度。

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

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

编辑 显然，填充 % 计算为宽度的百分比，无论您使用哪种框尺寸。作为一名前端开发人员，我这些年来从未遇到过这种情况。如果有人知道一个好的解决方法，我会全力以赴。

谢谢！

Answer 1

This is actually part of the CSS spec，所以这个行为是正确的，应该和你期望的一致。

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

编辑：稍微扩展一下，宽度计算不依赖于孩子的盒子模型；如果两者都没有指定，则子项的宽度可以超出父项。

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/