Problema al cambio de zoom en IE

[OsSk4R]

Buenas,

Bueno verán, estoy intentando diseñar una web de videos... y el problema que me surje es con el cambio de zoom en IE (8).

Tengo esto:




Esta captura es de Firefox. En Chrome e IE8 se ve exactamente igual. Lo que sucede, como comente arriba es que si agrando el zoom en IE8 el div duración se va hacía la derecha.

Aquí la imagen:



Sin emargo, no siempre es así. O sea, si por ejemplo agrando el zoom a 150% se ve mal, pero si lo agrando a 200% se ve bien, si lo agrando a 205% se ve mal...

Aqui os dejo el código CSS y el pequeño html:

Código CSS:

#contenedor {width:50em; height:auto; border:1px solid #ff0000; margin-left:13.5%; margin-top:6em; z-index:0;}
.resultados {height:10em; border:1px solid #1dff00; background-color:#f6f6f9; margin:0.2em;}
.resultados .titulo {margin-left:9.8em; margin-top:0.2em; width:30em; border:1px solid #1dfddd; font-size:1em; font-weight:bold; color:#f705cc;}
.resultados .votos {float:right; width:auto; border:1px solid #1d1d1d; margin-top:-1.4em}
.resultados .img_video {width:9.5em; float:left; padding:0.2em; border:1px solid #1d1d1d;}
.resultados .descripcion {margin-left:10.9em; margin-top:0.2em; width:30em; height:6em; font-size:0.9em; color:#2d2d2d; border:1px solid #1d1d1d;}
.resultados .duracion {margin-left:0.2em; margin-top:1em; width:9.5em; border:1px solid #fdac84;}
.resultados .tags {margin-top:-1.4em; margin-left:10em;border:1px solid #ff0000;}
.resultados .comentarios {margin-top:-1.4em; float:right; border:1px solid #0c68ff;}
 

Código HTML:

<div id="contenedor">
    <div class="resultados">
        <div class="img_video"><img src="img/video.png"></div>
        <div class="titulo">Un titulo bla bla bla bla bla bla...</div>
        <div class="votos"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"></div>
        <div class="descripcion">Una descripcion bla bla bla bla bla bla bla</div>
        <div class="duracion">Duracion: 10:00</div>
        <div class="tags">
        <img src="img/tags.png">&nbsp;f1,deportes,coches,ferrari,alonso
        </div>
        <div class="comentarios">Comentarios(0)</div> 
    </div>
    <div class="resultados">
        <div class="img_video"><img src="img/video.png"></div>
        <div class="titulo">Un titulo bla bla bla bla bla bla...</div>
        <div class="votos"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"></div>
        <div class="descripcion">Una descripcion bla bla bla bla bla bla bla</div>
        <div class="duracion">Duracion: 10:00</div>
        <div class="tags">
        <img src="img/tags.png">&nbsp;f1,deportes,coches,ferrari,alonso
        </div>
        <div class="comentarios">Comentarios(0)</div> 
    </div>
        
        
    </div> <!-- Fin de contenedor -->
 

Deduzco que quizá sea por la manera en que lo tengo estrucutrado... Así que atiendo consejos al respecto y/o si me ponen la manera correcta... encantado.

Muchas gracias,

PD: Para evitar problema con la resoluciones leí acerca de utilizar medidas relativas como em o %. Por tanto, es correcto el uso (en todo) de em? (Estaba mal acostumbrado a usar para todo px)