强制IE重新计算样式？

我建立了一个类似于http://code.google.com/p/jingo/的javascript/css依赖关系管理器。强制IE重新计算样式？

它让我做这样的事情：在执行前

Loader.DependsOn(['/scripts/jqueryui.js', '/scripts/jquery.js']) 
     .Css('/css/jquery.css') 
     .Execute(function() { //Insert script here});

装载机将动态加载两个脚本和CSS的（如果它们还没有被已经加载）。

一切工作，除了在IE浏览器。样式表通过向文档头添加链接来加载。但是，在执行此操作之前，加载程序会查看请求的css文件本身是否依赖于另一个模块。如果是，它会找出它应该插入的CSS文件的顺序。在除IE之外的所有浏览器中，如果将其插入到列表的开头，其他任何样式表将覆盖它的样式（预期行为）。然而，在IE中，尽管它在开始时插入，但IE将它视为最后一样。

有没有办法强制IE重新计算样式？

更新，测试用例：

创建两个样式表，sheet1.css，sheet2.css

sheet1.css

.testdiv 
{ 
    width:200px; 
    height:200px; 
    background-color:#c7c7c7; 
}

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秒后，它仍然存在。不用找了。

IE8发生了什么问题

灰盒子200px乘200px。 3秒后，它增长到400px×400px。

在Safari会发生什么（窗口） -

灰箱200像素由200像素。 3秒后，它仍然存在。不用找了。

这种情况发生在有或没有@Simon West的建议下。

来源

2012-01-16 Joe Enzminger

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

来源

2012-03-02 04:41:40 Saxoier

非常好。作品。谢谢你的提示。 – 2012-03-02 18:02:04

以下JS代码段应强制整个页面的重排/重绘。

document.body.className = document.body.className;

来源

2012-03-01 15:06:31

见编辑的问题。没有预期的效果。不过谢谢你的想法。 – 2012-03-02 01:16:49

这与回流/重绘无关。 – Saxoier 2012-03-02 04:40:08

强制IE重新计算样式？

回答

相关问题