Problema de flotación de IE8 con CSS

Question

Estoy seguro de que esto debe haber sido cubierto antes porque estoy seguro de que no soy el primero en hacer esto, pero no puedo encontrar la respuesta. Estoy creando un efecto de sombra para un <div> usando imágenes de fondo repetidas. En las dos esquinas inferiores utilizo pequeñas imágenes de 9x5 px. Los floto a izquierda y derecha y en Firefox y Safari se ven perfectos. En IE8 (y posiblemente otros IEs) flotan demasiado a la izquierda y a la derecha alrededor de 3px.

Puede ver el problema en aquí. Es una plantilla de eBay para mi esposa.

Hasta ahora he intentado configurar display: inline, que fue una solución para problemas similares de IE6. También intenté configurar los márgenes y el relleno de la imagen a 0px sin suerte.

¿Alguna idea?

Gracias Carraig

Answer 1

Mientras navegaba por su página, descubrí que está predeterminado en el modo de peculiaridades, que es el problema probable, porque si lo fuerzo a Estricto parece solucionar su problema flotante en todos los casos de IE.

lea el artículo de ppk aquí: http://www.quirksmode.org/css/quirksmode.html

explica por qué sucede y cómo solucionarlo :)

¡Espero que ayude!

Answer 2

Creo que tiene algo que ver con los elementos flotantes que salen de los bordes del div, intente insertar esto antes de cerrar el div padre:

<div style="clear: both; font-size: 1px; line-height: 0px;"> &nbsp;</div>