IE 8 Div desaparece cuando se agregan niños que son más grandes

Como dice el título, esto es lo que está pasando básicamente:

<div id='container' style='display:block; position:absolute; width:auto; height:533px;overflow:hidden;white-space:nowrap;'>
  </div>

Tras la interacción del usuario, realizo un trabajo: solicito algunos JSON, construyo elementos y luego agrego dichos elementos al div "contenedor". El resultado es algo como:

<div id='container' style='display:block; position:absolute; width:auto; height:533px;overflow:hidden;'>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
 </div>

Ahora esto es lo que sucede. Si los hijos se anexa a este y superan la altura de los padres. El padre desaparece.

He buscado "hasLayout" y todo ese jazz, nada funciona.

Lo que funciona es si los niños son del mismo tamaño o más pequeños - pero debido a la naturaleza de lo que estoy tratando de lograr, esto no se desea - ni se puede garantizar que sean más pequeños.

height:auto no funciona pero establecer un valor más grande que el niño más grande corrige esto, pero sesga mi diseño

Gracias de antemano.

editar: las imágenes se cargan a través de una combinación de JSON y una cola diferida. Se garantiza que se cargarán antes de agregarlos al elemento contenedor.

básicamente :

var img = new Image();
img.onload = function () { theContainer.appendChild(this);};
img.src = someURL;

funciona bien en todos los cromo y FF

edit2: he intentado agregar las imágenes tanto al objeto "contenedor" antes como después de que se agregue al cuerpo. Ninguno produce el resultado esperado.

edición 3: *IE7 e IE9 no se comportan como se describe anteriormente. Esto es exclusivo de IE 8 *

preguntado el 03 de mayo de 12 a las 22:05

¿Esto sucede solo en IE8? No pude reproducir esto en IE Tester o IE8 Mode en IE 9. -

IE 8 parece. Si ejecuto el proceso de agregación a través de una cola "setInterval", el proceso de agregación se ejecuta a la perfección hasta que se agrega una imagen que es más grande que el padre "contenedor", luego el div "desaparece", parece que quizás todavía sea un "hasLayout " problema, ya que cuando utiliza la herramienta de desarrollo web torpe IE 8 para inspeccionar el DOM, el contenedor y todas las imágenes se "rastrean" pero no se procesan. El div se representa y es visible HASTA que se agregue un elemento secundario más grande que él mismo. -

Si pudiera reproducir el problema en una página de prueba, o como jsfiddle.net or jsbin.com caso de prueba, tendría muchas más posibilidades de resolver esto. -

señalado. Veré lo que puedo hacer. -

2 Respuestas

He visto esto antes, pero no recuerdo exactamente cómo lo resolví. Puede intentar poner otro div dentro de su contenedor y agregar sus imágenes en ese div, los divs de envoltura a menudo solucionan los problemas de IE.

contestado el 03 de mayo de 12 a las 22:05

De hecho, lo intenté. El viejo <desbordamiento de div:desplazamiento> - el enfoque no parece ayudar - ¡Aprecio la sugerencia aunque! - brandt solovij

Hm, ¿las imágenes tienen un conjunto de ancho máximo? Puede intentar configurar max-width: none - kroehre

Le daré una oportunidad, actualmente es simplemente: img {display:inlne-block; top:0px; left:0px; position:relative; margin:0px; padding:0px; } - brandt solovij

¿Se muestran las imágenes en una cuadrícula? Considere usar "float:left" en lugar de "display:inline-block". También me pregunto si el posicionamiento relativo con la posición superior/izquierda podría estar mejorando las cosas. - kroehre

@ Kroehre: me perdí algo en la publicación original: el elemento contenedor tiene "white-space:nowrap" set - actualizándose ahora. También con width:auto - float no funciona de manera ideal - Es por eso que no estoy usando float. Supongo que podría conmutar los valores agregados de child.width... y luego establecer el ancho antes de mostrarlo... Realmente aprecio la discusión. Gracias por las sugerencias, mantendré esto actualizado a medida que progrese y repartiré puntos a todos cuando corresponda. - brandt solovij

Entonces, el problema fue el error "hasLayout" de IE 8. Al establecer el ancho del div del contenedor en "algo que no sea automático", ahora está visible y funciona / se muestra según lo previsto.

Tiempos divertidos, gracias a todos por la ayuda.

contestado el 04 de mayo de 12 a las 17:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.