这个跨度颜色不应该是绿色吗？

Question

跨度颜色不应该是绿色的，它在 Chrome 中是红色的。

HTML 规范说它应该是绿色的，它在 Firefox 中是绿色的。

HTML 规范使用 fetch 来获取元素引用的资源（请参阅此内容并且 fetch 始终是异步操作。因此在加载新样式表之前获取计算样式，因此颜色应为绿色。

 var div = document.createElement("div"); document.body.appendChild(div); var link = document.createElement("link"); link.href = "data:text/css,div { color: red }"; link.rel = "stylesheet"; var div = document.createElement("div"); document.body.appendChild(div); var link = document.createElement("link"); link.href = "data:text/css,div { color: red }"; link.rel = "stylesheet"; document.head.appendChild(link); document.querySelector("span").style.color = getComputedStyle(div).color; link.remove(); div.remove();

 div { color: green }

 <span>This should be green</span>

Answer 1

为了使分析更容易，我减少了您的样本以删除重复和不相关的行； 以下内容足以重现该问题：

 var div = document.createElement("div"); document.body.appendChild(div); var link = document.createElement("link"); link.href = "data:text/css,div { color: red }"; link.rel = "stylesheet"; document.head.appendChild(link); document.querySelector("span").style.color = getComputedStyle(div).color;

 div {color:green}

 <span>This is a span</span> <div>this is a div</div>

所以这里发生的事情是，有内联 CSS 说 div 应该是绿色的； 您生成一个将 div 设置为红色的 text/css 链接，并将其附加到文档头。 然后使用getComputedStyle将颜色从 div 复制到跨度上。

在 Safari、Chrome 和 Edge 中，两条线都以红色结束； 在 Firefox 中，跨度为绿色，div 为红色。

但是！ 首次加载时，或者如果您在 Safari 或 Chrome 中 使用干净的空缓存加载此页面^*您将看到与 Firefox 中相同的行为：绿色跨度和红色 div。 Edge 的行为永远不会像 FF，即使在第一次加载时，它也始终为红色。

^* （在 Safari 中，您可以只使用隐私浏览窗口。我可以发誓，我曾在 Chrome 中看到过相同的内容，但不再能够重现；可能我弄错了。）

因此，这是我对正在发生的事情的假设：

• 在 Safari 中，当生成的样式表链接以前从未使用getComputedStyle ，它是异步的，因此getComputedStyle从内联样式中选取颜色。 在以后的加载中，当getComputedStyle运行时，生成的样式表已经在缓存中，因此它的规则会接管。
• 在 Firefox 中，样式表链接始终被视为异步，因此 getComputedStyle 始终选择内联规则。
• 在其他浏览器中，样式表链接是同步解释的（可能是因为浏览器可以判断data URI 不需要网络时间？）因此在getComputedStyle运行之前进行处理。

这是一个足够奇怪的边缘情况，我不确定哪种行为可以被描述为“根据规范”。

Answer 2

尝试 HTML 或 HTML5（这是 Chrome）：

<span type="color:green">shouldn't this be green</span>