强制IE重新计算样式？ [英] Force IE to recompute styles?
问题描述
我构建了一个类似于 http://code.google.com/的javascript / css依赖关系管理器p / jingo / 。
它允许我这样做：
Loader.DependsOn(['/scripts/jqueryui.js', '/scripts/jquery.js'])
.Css('/css/jquery.css')
.Execute(function() { //Insert script here});
Loader将在执行前动态加载脚本和css（如果尚未加载它们） ）。
Loader will dynamically load both the script and the css before executing (if they haven't been loaded already).
一切正常，IE除外。通过在文档头部附加链接来加载样式表。但是，在执行此操作之前，加载程序会查看请求的css文件本身是否依赖于另一个模块。如果是，它将确定应该插入CSS文件的顺序。在除IE之外的所有浏览器中，如果我将其插入列表的开头，之后的任何其他样式表将覆盖它的样式（预期行为）。然而，在IE中，虽然它在开头插入，但IE将其视为最终。
Everything is working, except in IE. The style sheets are loaded by appending a link to the head of the document. However, before doing this, the loader looks to see if the requested css file is itself dependent on another module. If it is, it will figure out where in the order of CSS files it should be inserted. In all browsers except IE, if I insert it at the beginning of the list, any other stylesheets after will override it's styles (intended behavior). In IE, however, although it is inserted at the beginning, IE treats it as if it were at the end.
有没有办法强制IE重新计算样式？
Is there a way to force IE to recompute styles?
用测试案例更新：
创建两个样式表，sheet1.css，sheet2.css
Create two styles sheets, sheet1.css, sheet2.css
sheet1.css
sheet1.css
.testdiv
{
width:200px;
height:200px;
background-color:#c7c7c7;
}
sheet2.css
sheet2.css
.testdiv
{
width:400px;
height:400px;
}
加价：
<html>
<head>
<link href="style1.css" rel="stylesheet" "type="text/css" />
</head>
<body>
<div class="testdiv">
</div>
</body>
</html>
<script type="text/javascript" language="javascript>
setTimeout(function() {
var link = document.createElement('link');
link.href = 'sheet2.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.head || document.getElementsByTagName('head')[0];
head.insertBefore(link, head.children[0]);
setTimeout(function () {
//suggestion from Simon West
document.body.className = document.body.className;
}, 3000);
}, 3000);
</script>
会发生什么：
灰盒子200px乘200px。 3秒后，它仍在那里。没有变化。
Gray box 200px by 200px. After 3 seconds, it's still there. No change.
IE8会发生什么
灰色框200px乘200px。 3秒后，它增长到400px 400px。
Gray box 200px by 200px. After 3 seconds, it grows to 400px by 400px.
在Safari（Windows）上会发生什么 -
What happens on Safari (windows) -
灰色框200px乘200px。 3秒后，它仍在那里。没有变化。
Gray box 200px by 200px. After 3 seconds, it's still there. No change.
无论有没有@Simon West的建议，都会发生这种情况。
This occurs with or without @Simon West's suggestion.
推荐答案
<html>
<head>
<link href='sheet1.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class='testdiv'></div>
<script type='text/javascript'>
setTimeout(function() {
var link = document.createElement('link');
link.href = 'sheet2.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.getElementsByTagName('head')[0];
head.insertBefore(link, head.children[0]);
var docElem = document.documentElement,
docElemNext = docElem.nextSibling;
document.removeChild(docElem); // this will clear document.styleSheets
document.insertBefore(docElem, docElemNext);
}, 500);
</script>
</body>
</html>
这篇关于强制IE重新计算样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
