注入的鏈接樣式表優先於IE7中的現有樣式+

當級聯動態樣式表時，似乎IE中存在一個錯誤。有誰知道是否有解決方法？考慮到這一點：注入的鏈接樣式表優先於IE7中的現有樣式+

<head> 
    <style>#test{background:red;}</style> 
</head> 
<body> 
    <div id="test">test</div> 
    <script> 
     var link = document.createElement('link'); 
     var style = document.getElementsByTagName('style')[0]; 
     link.rel = 'stylesheet'; 
     link.href = 'test.css'; 
     style.parentNode.insertBefore(link, style); 
    </script> 
</body>

注入的'test.css'包含#test{background:green}。

即使我們在<style>標籤之前放置<link>，IE7 +也會使用注入的樣式表覆蓋樣式，並將綠色作爲背景。

FF/Chrome以正確的方式做到這一點，並讓style標籤優先於注入的鏈接標籤，使背景保持紅色。

來源

2010-07-01 David

'的'body' style'標籤是無效的（即使容忍所有的瀏覽器）。不過，我同意你的看法，FF＆co。做的是預期的行爲。 – 2010-07-01 13:53:59

是的，頭部也會發生同樣的效果。我只想陳述一個明確的例子。 – David 2010-07-01 13:55:15

動態鏈接缺少'type'屬性 - 幾乎不是問題的根源，但應該修復以排除不明顯的錯誤。另外，出於同樣的原因，我會發佈一個有效的基於頭部的示例。難道動態元素不是在IE中創建的？嵌入這種方式的其他樣式的工作？這適用於哪些版本的IE？ – 2010-07-01 14:01:53

我認爲這是IE定義insertBefore的原因。在IE中，只能將一個參數傳遞給insertBefore方法，它的行爲與appendChild相同。我認爲他們所做的是插入它然後移動它。如果它們在插入點渲染，那麼它會正確渲染。

身邊，我能想到的唯一的工作如下（這是不理想的）：

var link = document.createElement('link'); 
    var style = document.getElementsByTagName('style')[0]; 
    var newstyle = style.cloneNode(true); 
    link.rel = 'stylesheet'; 
    link.href = 'test.css'; 
    style.parentNode.insertBefore(link, style); 
    style.replaceNode(newstyle);

來源

2010-07-02 14:57:02

是的，我最後做了類似的事情。我在注射後「觸摸」頁面上的所有鏈接和樣式元素。 – David 2010-07-03 08:08:52

注入的鏈接樣式表優先於IE7中的現有樣式+

回答

相關問題