在级联动态样式表时,IE中似乎存在一个错误。有人知道是否有解决方法吗?请考虑以下内容:
<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+ 仍会使用注入的样式表覆盖样式,并将背景设置为绿色。
FF/Chrome 正确处理此问题,让样式标签优先于注入的链接标签,使背景保持为红色。
style
标签在body
中是无效的(尽管所有浏览器都容忍)。 不过,我同意您对 FF 和其他浏览器做法的看法是符合预期的行为。 - Pekka