为什么getComputedStyle不考虑边距崩溃？

Question

关于浏览器内Javascript, window.getComputedStyle()方法应该给出应用于元素的CSS属性的最终使用值。根据MDN文档，这意味着"在所有计算完成之后"。

然而，"所有计算"似乎不包括页边距塌陷。在Firefox和Chrome(至少)中，指令getComputedStyle().marginBottom在计算任何边距折叠之前返回计算值。

例如，考虑以下元素:

<div style="margin: 10px 0 15px 0"></div>

它的顶部和底部边距将被折叠，因为(大致)它的内容高度为零(参考W3C CSS2推荐)。CSSOM方法将返回这些值:

getComputedStyle().marginTop → 10px
getComputedStyle().marginBottom → 15px
getBoundingClientRect().top → {top of margin box} + marginTop
getBoundingClientRect().bottom → idem top

但是，由于边距塌陷，布局在客户端边框矩形之前显示了10px的边距，在max(0, marginBottom - marginTop)之后显示了5px的边距，即

为什么getComputedStyle().marginBottom不直接返回5px，实际使用的值"经过所有的计算已经执行"，而不是指定的15px?这是w3c推荐的行为吗?(我没有在w3.org文档中看到任何关于这个的内容。)

这是一个bug还是一个特性?

Answer 1

计算的和使用的值是有区别的。此外，getComputedStyle()返回解析的值，这些值可以是计算值，也可以是使用值。MDN参考。

对于这些计算状态的实用价值，我不知道。

Answer 2

我没有看到你所有的代码，但我认为函数名实际上是"getComputedStyle"，带有"u"。

一个错字吗?有那么简单吗?你不会是第一个——包括我自己。