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

Question

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

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

我找到的最好的解决方案是这样的：

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

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

Answer 1

尝试：

element.className = element.className;

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

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

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

Answer 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

上面的代码片段似乎适用于大多数场景，但在某个地方还不够。现在我们的代码中有这样的东西：

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) {}