css - parent 的填充会影响 Chrome 中 child 的垂直相对填充

Question

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

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

本例中的宽度显然是 padding-edge 之一，因此包括填充。 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 x 60 px²，对吧？

将 height: 100% 或 padding-bottom: 100% 分配给 child 应该没有区别吧？

Firefox 是这样，Chrome 不是这样。怎么回事？

显然 Chrome(和 Safari)正在考虑包含框的填充，这是不应该的。

还是我错了？

Answer 1

显然这是 Webkit 和 Blink 中的错误——或者只是没有指定，正如 Sergiy 指出的那样。

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

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

Safari 10.1 仍然存在问题。