para - IE CSS Bug-¿Cómo puedo mantener una posición: absoluta cuando cambia el contenido dinámico de JavaScript en la página?

pagina web no se ve bien en internet explorer

Question

Tengo una página donde hay una columna y un div de contenido, algo como esto:

<div id="container">
    <div id="content">blahblahblah</div>
    <div id="column"> </div>
</div>

Con un poco de estilo, tengo una imagen que se divide entre la columna y el contenido, pero necesita mantener el mismo posicionamiento vertical para que se alinee.

El estilo es similar a esto:

#column 
{
    width:150px;
    height:450px;
    left:-150px;
    bottom:-140px;
    background:url(../images/image.png) no-repeat;
    position:absolute;
    z-index:1;
}

#container 
{
   background:transparent url(../images/container.png) no-repeat scroll left bottom;
   position:relative;
   width:100px;
}

Esto funciona muy bien cuando el contenido en #content se carga dinámicamente antes de renderizar. Esto también funciona muy bien en Firefox siempre. Sin embargo, en IE6 e IE7 si uso javascript para cambiar el contenido (y, por lo tanto, la altura) de #content , las imágenes ya no se alinean ( #column no se mueve). Si uso IE Developer Bar para simplemente actualizar el div (digamos agregar posición: absoluto manualmente), la imagen salta y se alinea nuevamente.

¿Hay algo que me falta aquí?

@Ricky - Hmm, eso significa que en este caso no hay solución, creo. En el mejor de los casos, habrá un enfrentamiento irregular después, pero a medida que mi contenido se expanda y se contraiga, etc., esconderse / mostrarse no resulta práctico. Aún así, gracias por responder con la mejor solución.

Answer 1

Es un error en el motor de renderizado. Me encuentro con todo el tiempo. Una posible forma de resolverlo es ocultar y mostrar el div cada vez que cambie el contenido (que a su vez cambia la altura):

var divCol = document.getElementById(''column'');
divCol.style.display = ''none'';
divCol.style.display = ''block'';

Espero que esto suceda lo suficientemente rápido como para que no se note :)

Answer 2

Si le preocupa que un parpadeo muestre y oculte divCol, puede ajustar otra propiedad de css y tendrá el mismo efecto, por ejemplo:

var divCol = document.getElementById(''column'');
divCol.style.zoom = ''1'';
divCol.style.zoom = '''';

Answer 3

Otra solución que funcionó para mí y no tuvo ningún efecto parpadeante fue agregar y eliminar un nombre de clase de CSS ficticio, como este usando jQuery:

$(element).toggleClass(''damn-you-ie'')