css - posicionar - IE7 error de posicionamiento relativo/absoluto con contenido de página modificado dinámicamente
posicionar botones css (3)
Esta solución no tiene necesariamente que ver con el contenido dinámico, pero funcionó para mí (al menos hizo que la página funcionara en un grado manejable): especifique las dimensiones . Solo noté que IE7 pensaba que un div no tenía un ancho cuando usaba la herramienta ''Seleccionar elemento al hacer clic'' (CTRL + B) en las herramientas de IE.
Me preguntaba si alguien tiene una idea de cómo abordar el siguiente problema en IE7:
<!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 ejecute esto 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 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 realizaron más cambios de tamaño en la ventana (que es aproximadamente el 90% de los casos de uso que tenemos para nuestro producto ... . :() 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 específico de 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 #panel padre relativamente posicionado no tiene diseño y, por lo tanto, IE se olvida de volver a dibujar a sus hijos cuando se redimensiona / reposiciona.
El problema irá si agrega overflow: hidden; al padre de #panel relativamente posicionado.
#panel { position: relative; overflow: hidden; border: solid 1px black; }
Puede encontrar información detallada sobre este error de IE en la excelente referencia "Al tener un diseño" y luego, para su problema particular, específicamente en el capítulo "Elementos de posición relativa" :
Tenga en cuenta que
position: relativeno activa hasLayout, lo que conduce a algunos errores de representación, en su mayoría desaparecidos o contenido fuera de lugar. Las incoherencias pueden ser encontradas por la recarga de la página, el tamaño de la ventana y el desplazamiento, seleccionando. 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ñales de los eventos de redibujo).
La propiedad de overflow activa el elemento para tener un diseño, vea también el capítulo "De dónde viene el diseño" :
A partir de IE7, el
overflowconvirtió en un disparador de diseño.
He creado mi función para desencadenar 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 la muestra:
ie7fixElementDelayed($(''#HandPickedWidget .widget''), 700);