17

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

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

我制定的最佳解决方案是：

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

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

4

2 回答 2

40

尝试：

element.className = element.className;

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

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

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

于 2009-11-09T17:25:20.447 回答
3

我刚刚在这个绝对荒谬的错误（仅在 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.

相反，对于 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) {}
于 2012-05-16T13:13:49.030 回答