1

我在所有可以访问的基于 Webkit|Blink 的浏览器（Opera 16+、Chrome 12、29、Safari 5.1 Windows）中都看到了奇怪的行为。

假设我们有一个父 div，里面有一个子块元素。如果我们设置 child'swidth:xx%和 some padding:xx%，属性将被计算为所需的值。

但是如果父级本身有填充，则子级的填充（以百分比为单位）不尊重父级的填充。我只在 Webkit|Blink 中看到这一点。在所有浏览器中，孩子的宽度确实尊重父母的填充。box-sizing似乎不影响这种行为。

有关示例，请参阅fiddle。底部的孩子是方形的，应该是方形的。而顶部的孩子不是：它的padding-bottom:50%和width:50%被计算为不同的值。同样，在 FF、IE（至少 9 个）中，Blink Opera 之前的两个虚线边框块都是方形的。以下是代码摘录。

HTML：

<div class="parent padded"></div>
<div class="parent"></div>

CSS：

.parent{
    position:relative;
    width:200px;
    height:100px;
}
.parent.padded{
    padding:20px 30px;
}
.parent:after{
    position:absolute;
    bottom:0;
    left:0;
    box-sizing:border-box;
    width:50%;
    padding-bottom:50%;

    content:"";
}

谁能帮我说清楚：是引擎的错误吗？或者也许规范中的任何地方对此都有一些解释？

谢谢！

4

0 回答 0