关于浏览器内的Javascript,该window.getComputedStyle()方法应该给出应用于元素的CSS属性的最终使用值.根据MDN文档,这意味着"在完成所有计算后".
但是,似乎"所有计算"都不包括保证金崩溃.在Firefox和Chrome中(至少),指令getComputedStyle().marginBottom在计算任何边距折叠之前返回计算值.
例如,考虑以下元素:
<div style="margin: 10px 0 15px 0"></div>
Run Code Online (Sandbox Code Playgroud)
它的顶部和底部边距将被折叠,因为(大致)其内容高度为零(参见W3C CSS2建议书).CSSOM方法将返回以下值:
getComputedStyle().marginTop ? 10px
getComputedStyle().marginBottom ? 15px
getBoundingClientRect().top ? {top of margin box} + marginTop
getBoundingClientRect().bottom ? idem top
Run Code Online (Sandbox Code Playgroud)
但是,由于边缘折叠,布局在边界客户矩形之前显示10px的边距,之后的边距为5px,即max(0, marginBottom - marginTop).
为什么不getComputedStyle().marginBottom直接返回5px,实际使用的值"在所有计算完成后",而不是指定的15px?这是W3C推荐的行为吗?(我在w3.org文档中没有看到任何相关内容.)
这是一个错误还是一个功能?