Question

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

假设我们有一个父div，并且里面有一个子块元素。如果我们设置了子项width:xx%和一些padding:xx%，则会将属性计算为所需的值。

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

有关示例，请参阅fiddle。底部的孩子应该是正方形的。并且顶级孩子不是：padding-bottom:50%和width:50%计算为不同的值。再次，在FF，IE（至少9）中，前Blink Opera两个带边框的块都是方形的。以下是代码exrer。

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:"";
}

有人可以帮我说清楚：它是引擎的错误吗？或者也许在Spec中的任何地方都有一些解释？

谢谢！

Webkit / Blink：子填充设置为％，父级也有填充

0 个答案: