javascript - cambiar - ¿Cómo puedo forzar el reflujo después de un cambio DHTML en IE7?

cambiar texto label javascript

Question

Tengo una página donde el usuario puede agregar dinámicamente cuadros de carga de archivos. La adición de los cuadros cambia la altura del div en el que están, pero ciertos elementos del div debajo se mantienen en el mismo lugar, por lo que comienzan a superponerse con los nuevos elementos DOM.

Esto funciona correctamente en IE8, Firefox, Chrome. ¿Cómo puedo forzar a IE7 para que vuelva a fluir la página con el nuevo DHTML?

La mejor solución que encontré fue esta:

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

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

Answer 1

Acabo de perder increíbles cantidades de tiempo en este error absolutamente ridículo (que se manifiesta solo en IE7), en la página web es demasiado complejo para colocar el código aquí, donde element.className = element.className no estaba funcionando.

La solución definitiva para IE7 (bueno, probado al menos en el lugar donde he encontrado el error) parece estar ejecutando TODAS las líneas a continuación como un enganche a cualquier cambio de DOM:

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

Ya hemos tenido las primeras dos 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 tanto en la ventana maximizada como en la no maximizada.

try/catch está en su lugar porque en algunas circunstancias determinadas (por ejemplo, dentro de un 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í, todos amamos el código condicional para cada versión ...)

Me encanta Win XP como sistema operativo, pero hasta que la gente con destino a IE lo use, tenemos que encontrar soluciones sucias a problemas tan locos ... Muy triste.

Editar 2013.03.05

El fragmento de arriba parecía estar funcionando en la mayoría de los escenarios, pero tampoco 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) {}

Answer 2

Tratar:

element.className = element.className;

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

Como a className se le ha asignado un valor, IE volverá a fluir 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 de className realmente cambió de su valor anterior, por lo que lo anterior activará el reflujo sin romper nada más.

Encontré una ocasión en la que esto corrigió IE6 pero rompió IE7, pero inténtelo y vea si funciona para usted.