css - tamaño - Internet Explorer 8 muestra gradiente en lugar de imagen de fondo

fondo degradado transparente css

Question

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

Sin embargo, en Internet Explorer 8, en lugar de mosaico de la imagen 1x1 PNG, se muestra un degradado (!).

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 había visto un error como este antes y Google no me ayuda ...

Aquí hay una demostración en jsFiddle , http://jsfiddle.net/jUVfS/

Answer 1

Su imagen .png debe tener dimensiones más grandes, como mínimo 1x2 lugar de 1x1 .

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

Internet Explorer 8 no repite correctamente una imagen de fondo semitransparente de 1x1 píxeles cuando cualquier otro elemento de la página utiliza el filtro "-ms-filter" para la transparencia alfa.