IE8 affiche un dégradé au lieu d'une image d'arrière-plan

Question

J'ai une erreur bizarre. Je suis carrelage semi-transparent 1x1 px jaune PNG dans un DIV que des superpositions de texte. Avec normal Navigateurs, tout semble comme il se doit. Il y a un peu de texte et un jaune, semi-transparente superposition au-dessus d'elle.

Dans Internet Explorer 8 cependant, au lieu de carrelage 1x1 PNG, un gradient (!) est affiché.

Le CSS est plutôt 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;
}

Je n'ai jamais vu un bug comme ça avant, et google ne m'aide pas...

Edit: Voici une démo en jsfiddle http://jsfiddle.net/jUVfS/

Answer 1

Votre .png image doit avoir des dimensions plus larges, au minimum 1x2 au lieu de 1x1.

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

Internet Explorer 8 ne fonctionne pas la répétition d'une 1x1 pixel semi-transparente de l'image d'arrière-plan correctement lors de tout autre élément sur la page est à l'aide de la "-ms-filter" drective pour la transparence alpha.