代码之家 › 专栏 › 技术社区 › David Hellsing

注入的链接样式表优先于IE7中的现有样式+

css-cascade internet-explorer css javascript

David Hellsing · 技术社区 · 14 年前

当级联动态样式表时,IE中似乎有一个bug。有人知道有没有解决办法吗?考虑一下:

<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} .

即使我们把 <link> 在 <style> 标签,IE7+将用注入的样式表覆盖样式,并应用绿色作为背景。

1 回复 | 直到 8 年前

Michael Sparks 14 年前

我认为这是IE以前定义插入的方式造成的。在IE only中,您只能将一个参数传递到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);

推荐文章

Hala · 有没有什么方法可以将CSS属性设置为其他不兼容浏览器的属性的备用项?

2 年前

Error 1004 · 使用VBA从HTML中提取信息

6 年前

myroslav · IE11中Angular 4应用程序崩溃

6 年前

L Y E S - C H I O U K H Dumitru Boaghi · 在IE9/Angular 5/TypeScript上使用FormData,无需Ajax或jQuery

6 年前

Dhananjay C · Internet Explorer-表格上的CSS框阴影不适用于IE浏览器

6 年前

jacob · 当操作url为跨原点时,Microsoft浏览器不会将表单发布到iframe

6 年前

Athar K · 工具提示悬停上的过渡在IE上不起作用,在Google Chrome上效果很好

6 年前

adrien54 · 使用BlendColor过滤器的IE上的透明度问题

6 年前

Kathryn Crawford · ul元素上的伪元素在IE11中不起作用

6 年前

sankar · IE不显示abbr标记的边框底部

6 年前