如何在 IE7 中更改 DHTML 后强制重排？答案

【问题标题】：How can I force reflow after DHTML change in IE7?如何在 IE7 中更改 DHTML 后强制重排？
【发布时间】：2010-12-14 17:10:43
【问题描述】：

我有一个页面，用户可以在其中动态添加文件上传框。添加框会更改它们所在的 div 的高度，但其下方 div 的某些元素仍保留在同一位置，因此它们开始与新的 DOM 元素重叠。

这在 IE8、Firefox、Chrome 中可以正常工作。如何强制 IE7 使用新的 DHTML 重排页面？

我想出的最佳解决方案是：

window.resizeBy(1, 0); 
setTimeout(UndoResize, 0);

但它不适用于最大化窗口（它会恢复窗口）。

【问题讨论】：

标签： javascript internet-explorer-7 dhtml reflow

【解决方案1】：

试试：

element.className = element.className;

在修改后的 div 上（或者可能是它的父级，甚至是更远的祖先，这取决于各种因素，例如相对定位的容器）。

由于 className 已被分配一个值，IE 将重排并重新绘制页面的该部分，以防影响该元素的 CSS 发生更改。幸运的是，它没有针对检查 className 值是否实际上从之前的值发生变化而进行了优化，因此上述内容将触发回流而不会破坏其他任何内容。

我确实发现有一次修复了 IE6 但破坏了 IE7，但请尝试一下，看看它是否适合您。

【讨论】：

是的！此问题会影响正文下方的元素，因此我使用的是： document.body.className = document.body.className;谢谢！
这是 IE 特有的吗？就像这个解决方案在其他非 IE 浏览器中强制重排一样吗？我对成本/权衡感兴趣。
@cottsak：据我所知，这将在所有（当前）浏览器中产生类似的效果——事实上，我最初是从 Opera 开发者网站上的一篇文章中得到这个想法的。 W3C 的 WAI-ARIA Primer 第 3.1 节 w3.org/TR/2010/WD-wai-aria-primer-20100916/#exampletree 中也提到了该技术 - “可能需要切换类名，或者强制浏览器正确重绘样式。”
@NickFitz Kool。所以我想我可以假设，既然这个世界上的 Chrome 和 Firefox 不会像 IE 那样崩溃和烧毁，那么不加选择地运行它就不会影响它们的性能？
@Freewalker: document.body.className += ''; :)

【解决方案2】：

我刚刚在这个绝对荒谬的错误（仅在 IE7 中表现出来）浪费了难以置信的大量时间，网页太复杂，无法将代码放在这里，element.className = element.className 不起作用。

IE7 的最终解决方案（好吧，至少在我遇到错误的地方进行了测试）似乎是执行 以下所有行作为任何 DOM 更改的挂钩：

try{
    element.parentNode.style.cssText += "";
    element.parentNode.style.zoom = 1;
    element.style.cssText += "";
    element.style.zoom = 1;
}catch(ex){}

我们的框架中的前两行（用try-catch 包围）已经有很长时间了，但在某些特定情况下证明是不够的，但添加接下来的两行可以解决这个问题。

在最大化和非最大化窗口中测试。

try/catch 存在是因为在某些特定情况下（例如在iframe 内部）它可能会生成一个 JS 错误，从而破坏应用程序（这是来自我的团队成员的信息，我自己没有遇到过） .

相反，对于 IE8，element.className = element.className 似乎正在发挥作用（是的，我们都喜欢每个版本的条件代码......）

我喜欢 Win XP 作为一个操作系统，但在 IE 绑定的人使用它之前，我们必须为这些疯狂的问题找到肮脏的修复......该死的可悲。

编辑 2013.03.05

上面的 sn-p 似乎在大多数情况下都有效，但在一个地方还不够。现在我们的代码中有这样的东西：

try {
    var s1 = domElt.parentNode.style, s2 = domElt.style;
    var dummyCss = "foo:foo;"; // do not add leading ';' here!
    s1.cssText += "";
    s1.zoom = 1;
    s2.cssText += dummyCss;
    s2.cssText = s2.cssText.replace(dummyCss, "");
} catch (ex) {}

【讨论】：