En IE 7-9, los contenedores comienzan a superponerse/encogerse después del segundo bloque

Primero desaparecieron las imágenes, las arreglé colocando <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> en el encabezado, eso es bueno!

Ahora las imágenes se muestran pero se superponen después del segundo bloque. [IMG]. Me resulta difícil resolver esto porque no puedo instalar IE 7-9, confío en emuladores como netrenderer :(

El encabezado es <!DOCTYPE html> probé alguna otra pero nada cambio.

Los contenedores van así:

<div class="post-container-odd" >
<h2><a href="http://site.com/destinos/africa-ilhas/">África &amp; Ilhas</a></h2>
<div class="thumbnail"><a href="http://site.com/destinos/africa-ilhas"  title="Ilhas Maldivas"><img src="http://site.com/wp-content/uploads/2012/07/maldivas-22-380x200.jpg" title="" alt=""/></a></div>
</div>

<div class="post-container-even" >
<h2><a href="http://site.com/destinos/america-do-norte-caribe/">América do Norte &amp; Caribe</a></h2>
<div class="thumbnail"><a href="http://site.com/destinos/america-do-norte-caribe"  title="Chicago"><img src="http://site.com/wp-content/uploads/2012/07/chicago-29-380x200.jpg" title="" alt=""/></a></div>
</div>

Y CSS es solo esto:

.post-container-even{float:left;margin:0 0 20px 0;display:table}
.post-container-odd {float:left; margin: 0 5px 20px 0}

Agregó un ie.css con esto (resolvió algunos problemas pero aún se superponen):

.post-container-odd { float:left; margin: 0 5px 30px 0; display:inline;}

.post-container-even{ float:left; margin:0 0 30px 0; display:inline; clear: left}

.post-container-even img, .post-container-odd img { height: 200px ; width: 380px ; display:block; clear: both}

.post-container-even .thumbnail, .post-container-odd .thumbnail { height: 200px ; width: 380px ;  }

Tal vez coloque un <div style="clear:both"></div> cada dos iten puede resolver pero eso es bastante cojo?

Gracias por cualquier ayuda

Nota:

Sin el ie.css instrucciones: Imagen

Ahora, con ie.css: Imagen

preguntado el 28 de julio de 12 a las 03:07

1 Respuestas

Gracias, lo resolví colocando:

zoom: 1; *display:inline; in image containers.

Respondido 28 Jul 12, 16:07

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