Internet Explorer 8 muestra gradiente en lugar de imagen de fondo

Question

Tengo un error extraño. Estoy tejiendo una imagen semitransparente de amarillo 1x1 píxel PNG en un DIV que se superpone a un texto. Con normal navegadores, todo parece que debería. Hay algo de texto y una superposición amarilla, semitransparente encima.

En Internet Explorer 8 sin embargo, en lugar de la imagen PNG embaldosado 1x1, se muestra un gradiente (!).

El CSS es bastante simple:

.edit_section_overlay { 
    position: absolute; 
    z-index: 150; 

    top: -6px; 
    bottom: -6px; 
    left: -6px; 
    right: -6px; 

    border: 1px solid #afad9d; 
    background: url('../../images/content/edit/section/overlay/background-color.png') repeat; 

    min-height: 34px; 
    cursor: move; 
} 

nunca he visto un bicho como esto antes y Google no me ayuda ...

He aquí una demostración en jsFiddle, http://jsfiddle.net/jUVfS/

Answer 1

Su imagen .png necesita tener dimensiones más grandes, en mínimo1x2 en lugar de 1x1.

Ver: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/

Internet Explorer 8 no realiza la repetición de un píxel 1x1 imagen fondo semitransparente correctamente cuando cualquier otro elemento en la página está utilizando el "-MS- filter " drective para la transparencia alfa.