javascript - "display:none"元素的宽度或高度为零是标准吗？

Question

“display:none”元素的 offsetWidth 或 offsetHeight 在 Chrome 上为 0。

我想知道这是 W3C 定义的标准行为，还是浏览器的一种方言？还是事实上所有现代浏览器都支持它？

我在网上搜索了一下，发现几乎没有文字可以解决我的问题。

Answer 1

是的，这是标准行为。

如果display为none，则不创建布局框:

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

https://drafts.csswg.org/css2/visuren.html#display-prop

如果没有框，则返回零:

The offsetWidth attribute must return the result of running these steps:

1. If the element does not have any associated CSS layout box return zero and terminate this algorithm.
2. Return the border edge width of the first CSS layout box associated with the element, ignoring any transforms that apply to the element and its ancestors.

https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetwidth