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

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>

代码应该是.inner60 x60px²,对吗？

不应该有在分配差异height: 100%或padding-bottom: 100%孩子,对不对？

这是Firefox中的情况,但不是Chrome中的情况.这是怎么回事？

显然Chrome(和Safari)正在考虑包含框的填充,但它不应该考虑.

还是我弄错了？

Answer 1

显然，这是 Webkit 和 Blink \xe2\x80\x93 中的一个错误，或者只是没有指定，正如 Sergiy 指出的那样。

\n\n

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

\n\n

我提交了一份错误报告，该报告已被接受，并已在 Chrome v52 中修复。

\n\n

Safari 10.1 仍然存在该问题。

\n