1

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

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

HTML 规范使用 fetch 来获取元素引用的资源（参见this并且 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>

4

2 回答 2

2

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

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 中，span 为绿色，div 为红色。

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

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

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

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

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

于 2018-01-22T15:29:25.213 回答
-2

尝试 HTML 或 HTML5（这是 Chrome）：

<span type="color:green">shouldn't this be green</span>
于 2021-01-22T15:25:37.643 回答