這個跨度顏色不應該是綠色嗎？

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>