注入的链接样式表优先于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中的现有样式+

回答

相关问题