IE7 relativa/error de posicionamiento absoluto con el contenido de la página dinámicamente modificado

Me preguntaba si hay alguien que tenga una idea de cómo hacer frente con el siguiente problema en Internet Explorer 7:IE7 relativa/error de posicionamiento absoluto con el contenido de la página dinámicamente modificado

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>IE7 absolute positioning bug</title> 
    <style type="text/css"> 
     #panel { position: relative; border: solid 1px black; } 
     #spacer { height: 100px; } 
     #footer { position: absolute; bottom: 0px; } 
    </style> 
    <script type="text/javascript"> 
     function toggle() { 
     var spacer = document.getElementById("spacer"); 
     var style = "block"; 
     if (spacer.style.display == "block" || spacer.style.display == "") { 
      style = "none"; 
     } 
     spacer.style.display = style; 
     } 
    </script> 
    </head> 
    <body> 
    <div id="panel"> 
     <button onclick="toggle();">Click me</button> 
     <br /><br /><br /> 
     <div id="spacer"></div> 
     <div id="footer">This is some footer</div> 
    </div> 
    </body> 
</html>

Cuando se ejecuta esta en IE7 verá 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 intenté 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 product .... :() Estoy atascado con una solución basada en CSS, sin embargo, creo que puedo hacer una excepción en este caso si se puede hacer fácilmente IE7-specific (lo que significa que otros navegadores se comportarán en una forma estándar con esto).

por favor ayuda!

Fuente

2010-03-18 Matthias Hryniszak

¿Ha intentado cambiar doctypes a HTML o XHTML estricto estricto? ¿Qué pasa entonces? – NotMe

De hecho, no.El problema es que no tengo control sobre qué doctype se envía al cliente (por razones que no puedo analizar aquí), así que no sería la solución, incluso si hubiera funcionado ... –

2 años después y esto la pregunta (y la respuesta) siguen siendo increíblemente útiles. He estado rompiendo mi cabeza contra esto por un tiempo. Ni siquiera pude entender cómo redactar la pregunta correctamente ... ¡Gracias! –

esto se relaciona con el "bicho hasLayout" del IE. la posición relativa #panel padre no tiene la disposición 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; }

A fondo fondo información sobre este fallo de IE se pueden encontrar en la referencia excelente "On having layout" y luego para su problema particular en concreto el capítulo "Relatively positioned elements":

Tenga en cuenta que position: relative no desencadena hasLayout, lo que conduce a algunos errores de representación, en su mayoría desapareciendo o fuera de lugar. 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 olvidar 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 overflow desencadena el elemento a tener la disposición, véase también el capítulo "Where Layout Comes From":

A partir de IE7, overflow se convirtió en un diseño de gatillo.

Fuente

2010-03-18 20:45:58 BalusC

No se puede confirmar que en IE7 en IETester: todo desaparece. ¿Estás seguro de que es esto? –

¡Eso es A M A Z I N G !!! ¡¡¡Gracias!!! He estado luchando con esto durante 2 días y no he encontrado una respuesta. Muchas gracias! –

Oh, está bien, parece haber hecho el truco, tal vez obtuve el resultado deseado equivocado. –

Esta solución no necesariamente tiene nada que ver con el contenido dinámico, pero funcionó para mí (al menos hizo la página borked en un grado manejable): especificar 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.

Fuente

2011-08-11 16:44:59

Estoy feliz de que funcionó, pero su respuesta sería más adecuada para ser un comentario en lugar de una respuesta. – webLacky3rdClass

He creado 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); 
    }); 
}

Ejemplo de uso:

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

Fuente

2013-07-16 14:03:26 MaciejLisCK

IE7 relativa/error de posicionamiento absoluto con el contenido de la página dinámicamente modificado

Respuesta

Cuestiones relacionadas