Error de posicionamiento relativo / absoluto de IE7 con contenido de página modificado de forma dinámica

Me preguntaba si alguien tiene una idea de cómo abordar el siguiente problema en IE7:

   IE7 absolute positioning bug  #panel { position: relative; border: solid 1px black; } #spacer { height: 100px; } #footer { position: absolute; bottom: 0px; }   function toggle() { var spacer = document.getElementById("spacer"); var style = "block"; if (spacer.style.display == "block" || spacer.style.display == "") { style = "none"; } spacer.style.display = style; }    



Cuando ejecutas esto en IE7 verás que el elemento “pie de página” permanece después de modificar el CSS para “panel”. El mismo ejemplo probado en IE8, FF y Chrome se comporta exactamente como se esperaba.

Ya he intentado actualizar la clase del elemento, pero esto no funciona si la ventana del navegador se ha abierto al máximo y no se han realizado más cambios de tamaño en la ventana (que es aproximadamente el 90% de los casos de uso que tenemos para nuestro producto … . :() Tengo una solución basada en CSS, pero creo que puedo hacer una excepción en este caso si se puede hacer específicamente para IE7 (lo que significa que otros navegadores se comportarán de manera estándar con esto) .

¡Por favor ayuda!

    Esto está relacionado con el “error de hasLayout” de IE. El padre #panel relativamente posicionado no tiene el diseño y, por lo tanto, IE se olvida de volver a dibujar sus hijos cuando se redimensiona / reposiciona.

    El problema se resolverá si agrega overflow: hidden; al padre #panel relativamente posicionado.

     #panel { position: relative; overflow: hidden; border: solid 1px black; } 

    En la información de fondo sobre este error de IE se puede encontrar en la excelente referencia “Al tener el diseño” y luego para su problema en particular, específicamente el capítulo “Elementos relativamente posicionados” :

    Tenga en cuenta que position: relative no desencadena hasLayout, lo que conduce a algunos errores de representación, en su mayoría desaparecen o se pierden el contenido. Se pueden encontrar incoherencias al cargar la página, cambiar el tamaño de la ventana y desplazarse, seleccionar. Con esta propiedad, IE compensa el elemento, pero parece olvidarse de enviar un “redibujado” a sus elementos secundarios de diseño (como un elemento de diseño se habría enviado correctamente en la cadena de señal de los eventos de redibujado).

    La propiedad de overflow activa el elemento para que tenga un diseño, consulte también el capítulo “De dónde viene el diseño” :

    A partir de IE7, el overflow convirtió en un disparador de disposición.

    Esta solución no necesariamente tiene que ver con el contenido dynamic, pero funcionó para mí (al menos hizo que la página fuera modificada de una manera manejable): especifique las dimensiones . Solo me di cuenta de que IE7 pensaba que un div no tenía ancho cuando usaba la herramienta de mierda ‘Seleccionar elemento por clic’ (ctrl + B) en las herramientas de IE.

    Creé mi función para activar el redibujado. Tal vez no sea una solución correcta, pero funciona.

     // Script to fix js positon bug on IE7 // Use that function, recomended delay: 700 function ie7fixElementDelayed(elements, delay) { window.setTimeout( function () { if(navigator.appVersion.indexOf("MSIE 7.") != -1) { ie7fixElement(elements); } }, delay ); } function ie7fixElement(elements) { elements.each(function(i) { var element = $(this); var orginalDisplayValue = element.css("display"); element.css("display", "none"); element.css("display", orginalDisplayValue); }); } 

    Uso de muestra:

     ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);