Internet Explorer 8 zeigt ein Farbverlauf anstatt eines Hintergrundbildes an

Question

Ich habe einen seltsamen Fehler. Ich kachel ein halbtransparentes 1x1 Pixel gelbes PNG Bild in einem DIV, das über etwas Text liegt. Bei normalen Browsern sieht alles so aus, wie es sollte. Es gibt Text und ein gelbes, halbtransparentes Overlay darüber.

In Internet Explorer 8 wird jedoch anstelle des Kachelns des 1x1 PNG-Bildes ein Gradient (!) angezeigt.

Der CSS ist ziemlich einfach:

.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;
}

Ich habe noch nie einen Bug wie diesen gesehen und Google hilft mir nicht...

Hier ist eine Demo in jsFiddle, http://jsfiddle.net/jUVfS/

Answer 1

Ihr .png Bild muss größere Abmessungen haben, mindestens 1x2 anstelle von 1x1.

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

Internet Explorer 8 führt die Wiederholung eines 1x1 Pixel halbtransparenten Hintergrundbildes nicht korrekt aus, wenn ein anderes Element auf der Seite das "-ms-filter" Direktive für die Alphatransparenz verwendet.