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

【问题标题】：Shouldn't this span color be green?这个跨度颜色不应该是绿色吗？
【发布时间】：2018-07-01 06:10:04
【问题描述】：

跨度颜色不应该是绿色，它在 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 }

&lt;span&gt;This should be green&lt;/span&gt;

【问题讨论】：

在我看来是绿色的？火狐 57
为什么有人对此投反对票并投票赞成关闭，这是一个真正的问题。
我认为它应该是红色的，因为此时您的呼叫getComputedStyle 已添加动态链接样式。所以在这里我认为 Chrome 做得正确。
@SurajJain 这是一个反对票。不要这么个人化。
“为什么不采取人身攻击” - 因为这绝不是人身攻击。为了公平对待投票者，您没有解释为什么您期望得到您期望的结果。您刚刚转储了一段 javascript，并希望我们通过它来挑选。

标签： javascript html css browser-bugs

【解决方案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 复制到 span。

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

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

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

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

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

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

【讨论】：

感谢您的回答。
在 chrome 中怎么样？\
Chrome 和 safari 一样：干净的缓存让它表现得像 firefox。
Chrome 在我的情况下并没有那样做。无论哪种方式，它都是红色的。
我认为这里的问题是一些浏览器供应商正在看到数据 uri，立即解码和更新 DOM，在某些方面，这在正常情况下确实不应该成为问题，因为 onload 事件可能仍然会被调用。任何 Javascript 代码都依赖于任何特定执行顺序的异步操作，这似乎很奇怪，因此在大多数情况下不会成为问题。呈现的代码是一个非常奇怪的边缘情况，Chrome 开发人员很可能很容易通过将所有 data:uri 放入 setImediate 类型调用来修复。这似乎类似于 Promise.then 库差异。

【解决方案2】：

试试 HTML 或 HTML5（这是 Chrome）：

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

【讨论】：