11

关于浏览器内的 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 的边距，在之后显示了 5px 的边距，即max(0, marginBottom - marginTop).

为什么不getComputedStyle().marginBottom直接返回 5px，即“所有计算完成后”的实际使用值，而不是指定的 15px？这是 W3C 推荐的行为吗？（我在 w3.org 文档中没有看到任何关于此的内容。）

这是错误还是功能？

4

2 回答 2

0

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

错字？能这么容易吗？你不会是第一个——包括我自己。

希望这会有所帮助。

于 2014-05-12T19:14:09.990 回答
0

计算值和使用值之间存在区别。此外，getComputedStyle()返回解析值，“可能是计算值或使用值”。MDN 参考。

至于很多计算状态的实用价值，我就不知道了。

于 2021-12-08T08:30:30.207 回答