Jak wymusić zmianę przepływu po zmianie DHTML w IE7?

Question

Mam stronę, na której użytkownik może dynamicznie dodawać pola przesyłania plików. Dodanie tych pól powoduje zmianę wysokości div, w której się znajdują, ale niektóre elementy div poniżej znajdują się w tym samym miejscu, więc zaczynają pokrywać się z nowymi elementami DOM.

To działa poprawnie w IE8, Firefox, Chrome. Jak mogę zmusić IE7 do przepełnienia strony nowym DHTML?

Najlepszym rozwiązaniem wypracowałem było to:

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

Ale to nie działa z zmaksymalizowane okna (przywraca okno).

Answer 1

Spróbuj:

element.className = element.className; 

zmodyfikowanego div (ewentualnie jego macierzysty, a nawet bardziej odległe przodka, w zależności od różnych czynników, takich jak stosunkowo ustawionej szczelne zamknięcie).

Po przypisaniu wartości className wartość IE zostanie ponownie przepalona i odmalowana na tej części strony w przypadku zmiany CSS wpływającego na ten element. Na szczęście nie jest zoptymalizowany, aby sprawdzić, czy wartość className rzeczywiście zmieniła się z poprzedniej wartości, więc powyższy wynik wywoła efekt refurbacji bez przerywania czegokolwiek innego.

Znalazłem jedną okazję, gdy naprawiono IE6, ale złamałem IE7, ale spróbuj i sprawdź, czy to działa.

Answer 2

Właśnie zmarnowałem niesamowitą ilość czasu na ten absolutnie absurdalny błąd (przejawiający się tylko w IE7), na stronie internetowej zbyt skomplikowane, aby umieścić kod tutaj, gdzie element.className = element.className nie działa.

Ostatecznym rozwiązaniem dla IE7 (dobrze, testowane przynajmniej w miejscu Napotkałem błąd) wydaje się być wykonywanie wszystkie linie poniżej jako haczyk do wszelkich zmian DOM:

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

Już od dawna mieliśmy dwie pierwsze linie (otoczone try-catch) w naszym frameworku, ale w niektórych przypadkach okazało się to niewystarczające, ale dodanie dwóch następnych poprawiło to.

Testowane zarówno w oknie zmaksymalizowanym, jak i nie zmaksymalizowanym.

try/catch jest na swoim miejscu, ponieważ w pewnych określonych okolicznościach (na przykład wewnątrz iframe) może wygenerować błąd JS że złamie aplikację (jest informacji od moich kolegów z zespołu, nie spotkałem go samodzielnie).

Wręcz przeciwnie, dla IE8, element.className = element.className zdaje się robić swoje zadanie (tak, wszyscy kochamy kod warunkowy dla każdej wersji ...)

Kocham Win XP jako systemu operacyjnego, ale do IE-bound ludzie go używają, musimy znaleźć brudne poprawki do takich szalonych problemów ... Cholera smutno.

---

Edit 2013.03.05

Powyższy fragment wydawało się działać w większości scenariuszy, ale też nie było na tyle w jednym miejscu.Teraz mamy takie rzeczy w naszym kodzie:

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