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

标签 javascript html css dom

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

我想知道这是 W3C 定义的标准行为,还是只是浏览器的一种方言?或者它实际上是所有现代浏览器都支持的?

我在网上搜索,发现几乎没有文字解决我的问题。

最佳答案

是的,这是标准行为。

如果displaynone,则不会创建布局框:

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

关于javascript - "display:none"元素的宽度或高度为零是标准吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56405517/

相关文章:

javascript - Bootstrap4 sticky-top(粘性导航栏)无法正常工作

css - 具有固定页眉和页脚的跨浏览器表格布局

javascript - 从集合中返回一个数组,从字符串创建变量,然后将该数组传递给动态模板助手?

javascript - 我正在寻找一种在 Vuetify 中保持底部导航图标颜色的方法

html - 在 Node.js 中加载基本 HTML

html - 如何使此导航栏透明?

javascript - 从 iframe 中获取 top href 和innerHTML

javascript - 使用循环将点击事件绑定(bind)到在 javascript/jquery 中不起作用的几个元素上

不同顺序的 CSS 规则会导致不同的结果

css - 如何设置 p :column in a p:dataTable in PrimeFaces 3. 0 的宽度?