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その要素に影響を与える CSS が変更された場合、IE はページのその部分をリフローして再描画します。幸いなことに、className値が実際に以前の値から変更されたかどうかを確認するように最適化されていないため、上記は他に何も壊すことなくリフローをトリガーします。

これにより IE6 は修正されたが IE7 が壊れたという 1 つの機会を見つけましたが、試してみて、うまくいくかどうかを確認してください。

于 2009-11-09T17:25:20.447 に答える
3

私は、この絶対にばかげたバグ (IE7 でのみ現れる) に信じられないほどの時間を無駄にしました。Web ページの方法が複雑すぎて、ここにコードを配置できず、機能し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){}

フレームワークにはすでに最初の 2 行 ( で囲まれていtry-catchます) がありましたが、特定のシナリオでは不十分であることが判明しましたが、次の 2 行を追加することでこれが修正されました。

最大化されたウィンドウと最大化されていないウィンドウの両方でテストされています。

try/catch特定の状況 ( 内などiframe) では、アプリを破壊する JS エラーが生成される可能性があるためです (これは私のチーム フェローからの情報であり、私自身は遭遇したことがありません)。

それどころか、IE8 では、element.className = element.classNameその役割を果たしているようです (ええ、私たちは皆、各バージョンの条件付きコードが大好きです...)

私は OS として Win XP を愛用していますが、IE に慣れ親しんでいる人々がそれを使用するまでは、このようなクレイジーな問題に対する汚い修正を見つけなければなりません... くそー悲しいです。

2013.03.05 編集

上記のスニペットは、ほとんどのシナリオで機能しているように見えましたが、1 つの場所では十分ではありませんでした。コードには次のようなものがあります。

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 に答える