Question

我正在使用既定方法通过设置相对padding-bottom来保持元素的比率。

相对垂直边距和填充相对于包含块的宽度，宽度本身也是如此。

在这种情况下，宽度显然是填充边之一，因此包括填充。 100％绝对的孩子将覆盖父母的填充。

.outer {
  border: 1px solid gray;
  width: 60px;
  height: 60px;
  padding: 5px;
  
  position: relative;
}

.inner {
  position: absolute;
  top: 0;
  height: 0;
  padding-bottom: 100%;
  
  left: 0;
  width: 100%;
  
  background-color: lightgreen
}

<div class="outer">
  <div class="inner">
  </div>
</div>

代码应该将.inner渲染为60 x60px²，对吗？

为孩子分配height: 100%或padding-bottom: 100%应该没有区别，对吗？

在Firefox中就是这种情况，但在Chrome中则不然。发生了什么事？

显然Chrome（和Safari）正在考虑包含框的填充，但不应该这样做。

或者我错了？

Answer 1

显然它是Webkit和Blink中的一个错误 - 或者它没有被指定，正如Sergiy指出的那样。

我认为这是一个错误，因为width: 100%考虑了填充，而任何其他％单位应该表现相同。

我提交的bugreport已被接受，已在Chrome的v52中修复。

Safari 10.1仍有问题。

父级填充会影响Chrome中孩子的垂直相对填充

1 个答案: