“document.createElement”如何工作以“显示”属性答案

【问题标题】：how "document.createElement" works to "display" property“document.createElement”如何工作以“显示”属性
【发布时间】：2017-03-19 15:11:04
【问题描述】：

我发现了一个有趣的现象，它在 Firefox 和 Chrome 中的表现不同。

用 F12 打开浏览器 devTool 并输入。

var span=document.createElement("span");
document.defaultView.getComputedStyle(span).display;

它在 Firefox 中返回“block”，在 Chrome 中返回 ""。我第一次遇到这个案例是在 Firefox 中，结果是“阻止”让我感到惊讶！不过document.body.appendChid(span)的时候就ok了。

我在MDN上搜索，但最后没有任何收获。我猜document.defaultView.getComputedStyle是受浏览器渲染引擎的影响。“显示”属性是在渲染引擎渲染到DOM树之后设置的.and gecko(Firefox) 将默认值设置为“block”，而 webkit(Chrome) 将其设置为“”。

谁能给个更详细的解释？

【问题讨论】：

你试过新的Tab，about:blank吗？ document 的用户代理样式是什么？
@guest271314 感谢您的回答。标签在用户代理样式中的显示在 Chrome 中什么都没有，这意味着它是“内联”的。但是在 Firefox 中它是“块”，但我不知道它来自哪里，因为display 不是继承的 css 属性。

标签： javascript html css dom browser

【解决方案1】：

这是因为规范没有指定 DOM 之外的元素是否具有计算样式。

Firefox 认为他们会这样做。它们会受到文档中样式表的影响。

console.log(getComputedStyle(document.createElement('span')).display);
// "flex" on Firefox

span { display: flex; }

Chrome 认为它们没有，因此返回空字符串。您需要将它们附加到文档中才能使用getComputedStyle。

这是在 www-style 中讨论过的：computedStyle of cloneNode

您会得到display: block 而不是最初的inline，因为根据CSS Display 的指示，

根元素的显示类型始终为blockified。

当您在文档外创建span 元素时，它没有父元素，因此它是根。然后inline 变成block。

同样，如果你的样式表中有span { display: inline-block }，你也会得到block。使用span { display: inline-flex }，您将获得flex，使用span { display: inline-table }，您将获得table，依此类推。

【讨论】：

好吧，它解决了我的一些难题。谢谢。但是标签的 display:block 来自哪里？它不是用户代理风格，我没有发现关于 span 的 display css 属性。而 display 不是继承的 css 属性。它是 block DOM 外部元素的 display 属性的默认值？ @Oriol
@PageYe 好点子，CSS Display 确实阻止了根元素。
抱歉 blockify 是什么？这让我很困惑。
@PageYe Blockification 将内联级框转换为其块级等效项。 inline 和 inline-block 变为 block，inline-flex 变为 flex，inline-grid 变为 grid，inline-table 变为 table，等等。