Question

跨度颜色不应为绿色，Chrome中为红色。

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

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

＆＃13;

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();

＆＃13;

div { color: green }

＆＃13;

<span>This should be green</span>

＆＃13;

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应该是绿色的;您生成一个text / css链接，将div设置为红色，并将其附加到文档头。然后使用getComputedStyle将div中的颜色复制到span。

在Safari，Chrome和Edge中，这两行都是红色的;在Firefox中，span为绿色，div为红色。

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

^*（在Safari中你可以使用私人浏览窗口。我可以发誓我曾经在Chrome中看到过相同的内容，但我无法重现;可能我错了。）

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

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

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

Answer 2

尝试 HTML 或 HTML5（这是 Chrome）：

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

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

2 个答案: