IE Hintergrund RGB Bug

Die Verwendung von RGBa für progressive Enhancement wird immer beliebter, was großartig ist. Schon vor fast einem Jahr war es so gut wie einsatzbereit. Eine großartige Möglichkeit, den Teil des progressiven Enhancements zu handhaben, ist einfach, eine Fallback-Farbe vor dem RGBa-Wert zu deklarieren, damit ältere Browser, die es nicht unterstützen, eine solide Farbversion erhalten.

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

Das oben Genannte funktioniert einwandfrei, jedoch hat mich Dan Beam auf einen interessanten Bug/Eigenartigkeit in IE 6 & 7 (behoben in IE 8) aufmerksam gemacht. Siehe Beispiel.

Die Situation ist, dass **die RGB-Fallback-Farbe nur bei Verwendung von Kurzschreibweise funktioniert**. Wenn Sie die Fallback-Farbe so deklarieren würden

div {
	background-color: rgb(255,0,0);
	background-color: rgba(255,0,0,0.5);
}

diebackground-colorEigenschaft allein verwenden, schlägt dies fehl und es wird überhaupt keine Hintergrundfarbe angezeigt.

Das obige Bild stammt aus IE 7. Die Verwendung der Kurzschreibweise (oben) gelingt, während die Nicht-Kurzschreibweise (unten) fehlschlägt.

Lösung

Die Verwendung von RGB als Fallback ist gut. Es ist eine einfache Arbeit, denn alles, was Sie tun müssen, ist den RGBa-Wert zu duplizieren, das "a" zu entfernen und den 4. (Deckkraft) Parameter zu entfernen. Wenn Sie RGB weiterhin als Fallback verwenden möchten, denken Sie daran, es mit Kurzschreibweise (falls möglich) einzustellen oder den Fallback mit regulären HEX-Codes oder Schlüsselwörtern einzustellen.

Im Beispiel ist das Ergebnis von 50% Rot sowieso ein helles Rot, daher könnte die Angabe dieses Werts mit einem Hex-Code ohnehin eine passendere Fallback-Farbe sein.

div {
  background-color: #fd7e7e;
  background-color: rgba(255,0,0,0.5);
}