¿Cómo puedo forzar el reflujo después del cambio de DHTML en IE7?

Question

Tengo una página donde el usuario puede agregar dinámicamente cuadros de carga de archivos. Agregar los cuadros cambia la altura del div en el que se encuentran, pero ciertos elementos del div debajo de él permanecen en el mismo lugar, por lo que comienzan a superponerse con los nuevos elementos del DOM.

Esto funciona correctamente en IE8, Firefox, Chrome. ¿Cómo puedo obligar a IE7 a refluir la página con el nuevo DHTML?

La mejor solución que funcionó fue la siguiente:

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

Pero no funciona con una ventana maximizada (restaura la ventana).

Answer 1

Probar:

element.className = element.className; 

en el div modificado (o, posiblemente, su padre, o incluso un antepasado más remoto, dependiendo de varios factores tales como la contención de posicionado relativamente).

Como al className se le ha asignado un valor, IE volverá a dibujar y volverá a pintar esa parte de la página en caso de que el CSS que afecta a ese elemento haya cambiado. Afortunadamente, no está optimizado para verificar si el valor className realmente cambió de su valor anterior, por lo que lo anterior activará el reflujo sin romper nada más.

Encontré una ocasión cuando esto solucionó IE6 pero rompió IE7, pero pruébalo y mira si funciona para ti.

Answer 2

Acabo de perder una cantidad increíble de tiempo en este error absolutamente ridículo (que se manifiesta en IE7 solamente), en la página web demasiado compleja para poner aquí el código, donde element.className = element.className no funcionaba.

La solución definitiva para IE7 (bueno, probado por lo menos en el lugar que he encontrado el error) parece ser la ejecución de TODAS las líneas siguientes como gancho para cualquier cambio DOM:

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

Ya hemos tenido las dos primeras líneas (rodeadas con try-catch) en nuestro marco durante mucho tiempo, pero resultó insuficiente en algún escenario particular, pero agregar las siguientes dos solucionó esto.

Probado en ventanas maximizadas y no maximizadas.

try/catch porque en ciertas circunstancias (por ejemplo, dentro de iframe) puede generar un error JS que romperá la aplicación (esta es información de mi compañero de equipo, no la he encontrado).

Por el contrario, para IE8, element.className = element.className parece estar haciendo su trabajo (sí, a todos nos gusta código condicional para cada versión ...)

Me encanta Win XP como sistema operativo, pero hasta IE-bound la gente lo usa, tenemos que encontrar soluciones sucias para problemas tan locos ... Maldición triste.

---

Editar 2013.03.05

El fragmento anterior parecía estar funcionando en la mayoría de los escenarios, sino que además no era suficiente en un solo lugar.Ahora tenemos cosas como esta en nuestro código:

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