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

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

2 个答案: