关于span元素颜色显示异常的技术咨询：Chrome显示红色而非绿色

这个问题的核心在于Chrome和Firefox对动态插入的data URI样式表的加载/解析时机处理存在差异——即使HTML spec提到fetch是异步操作，但本地资源（比如data URI）的特殊优化导致了跨浏览器的行为分歧。

问题场景回顾 #

你通过脚本动态插入了一个包含div { color: red }的data URI样式表，随后用getComputedStyle获取div的颜色并赋值给span，之后移除了临时样式表和div。按照预期span应显示原始CSS定义的绿色，但Chrome中显示红色，Firefox表现正常。

关键差异分析 #

HTML spec中说fetch是异步操作，但data URI属于本地资源，不需要发起网络请求，因此浏览器对其处理有优化空间：

• Chrome的行为：对于data URI的样式表，Chrome会同步解析并立即应用到DOM中。当脚本执行到getComputedStyle(div).color时，临时的红色样式已经生效，因此span被设置为红色。后续移除样式表和div的操作不会改变span已经设置好的行内样式。
• Firefox的行为：Firefox严格遵循异步加载的逻辑，即使是data URI样式表，也会在当前脚本执行完成后再解析应用。因此在执行getComputedStyle时，div的颜色还是原始CSS定义的绿色，span被设置为绿色，符合预期。

验证与解决方案 #

如果将data URI替换为远程CSS文件，Chrome和Firefox都会显示绿色——因为远程资源的fetch是真正的异步操作，getComputedStyle执行时样式表还未加载生效。

要确保跨浏览器一致显示绿色，你可以先获取原始样式，再插入临时样式表：

var div = document.createElement("div");
document.body.appendChild(div);
// 先获取原始CSS定义的绿色
var originalColor = getComputedStyle(div).color;

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

// 使用预先获取的原始颜色设置span
document.querySelector("span").style.color = originalColor;

link.remove();
div.remove();

这样无论Chrome还是Firefox，span都会正确显示绿色。

内容的提问来源于stack exchange，提问作者Suraj Jain