Wie kann ich Reflow nach DHTML-Änderung in IE7 erzwingen?

Question

Ich habe eine Seite, auf der der Benutzer Datei-Upload-Boxen dynamisch hinzufügen kann. Das Hinzufügen der Felder ändert die Höhe des DIV, in dem sie sich befinden, aber bestimmte Elemente des darunter liegenden DIV bleiben am selben Ort, sodass sie anfangen, sich mit den neuen DOM-Elementen zu überlappen.

Dies funktioniert korrekt in IE8, Firefox, Chrome. Wie kann ich IE7 erzwingen, die Seite mit dem neuen DHTML neu zu fetten?

Die beste Lösung, die ich ausgearbeitet war:

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

Aber es funktioniert nicht mit einem maximierten Fenster (es wieder aus dem Fenster).

Answer 1

Versuchen:

element.className = element.className; 

auf dem modifizierten div (oder möglicherweise seine Eltern, oder sogar ein entfernteren Vorfahren, abhängig von verschiedenen Faktoren wie relativ positionierte) angewandt werden.

Da der className ein Wert zugewiesen wurde, wird IE diesen Teil der Seite neu aufbauen und neu streichen, falls sich das CSS, das dieses Element betrifft, geändert hat. Glücklicherweise ist es nicht optimiert zu überprüfen, ob der className Wert sich tatsächlich von seinem vorherigen Wert geändert hat, so dass das obige den Reflow auslöst, ohne etwas anderes zu beschädigen.

Ich habe eine Gelegenheit gefunden, als dies IE6 behoben IE7 aber brach, aber versuchen Sie es und sehen, ob es für Sie funktioniert.

Answer 2

Ich habe gerade unglaublich viel Zeit auf diesen absolut lächerlichen Fehler verschwendet (manifestiert nur in IE7), in der Webseite viel zu komplex, um den Code hier zu setzen, wo element.className = element.className nicht funktionierte.

Die ultimative Lösung für IE7 (na ja, zumindest an der Stelle getestet Ich habe den Fehler aufgetreten) scheint ALL die Linien zu Ausführung unter als Haken auf alle DOM Änderungen:

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

Wir hatten bereits die ersten beiden Zeilen (umgeben von try-catch) in unserem Framework für eine lange Zeit, aber es erwies sich in einem bestimmten Szenario als nicht ausreichend, aber das Hinzufügen der nächsten beiden reparierte dies.

Getestet sowohl im maximierten als auch im nicht maximierten Fenster.

try/catchtry/catch ist vorhanden, da unter bestimmten Umständen (z. B. in einem iframe) kann es einen JS-Fehler generieren, die die App (das ist Informationen von meinem Team Fellow, ich habe es selbst nicht getroffen).

Im Gegenteil, für IE8 scheint element.className = element.className, seine Arbeit zu tun (ja, wir alle bedingten Code für jede Version lieben ...)

Ich liebe Win XP als Betriebssystem, aber bis IE-bound Leute benutzen es, wir müssen schmutzige Lösungen für solche verrückten Probleme finden ... Verdammt traurig.

---

bearbeiten 2013.03.05

Das Snippet oben schien in den meisten Szenarien zu arbeiten, war aber auch an einem Ort nicht genug.Jetzt haben wir solche Sachen in unserem Code:

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