Lightbox-Hintergrundprobleme im IE

In der Mitte des Bildschirms erscheinen Lightboxen mit einem halbtransparenten Hintergrund, um einer Website einen verblassten Hintergrundeffekt zu verleihen. Während verschiedene Typen von Leuchtkasten unterschiedliche Codierungen verwenden, verwenden sie alle Cascading Stylesheets, um den visuellen Aspekt des Lightbox-Effekts zu erzeugen. Internet Explorer erkennt CSS jedoch nicht.

Lightbox-Builds

Die meisten Lightboxen verwenden für den Leuchtkasten-Effekt eine Form von Javascript. Thickbox zum Beispiel ist durch die Verwendung von jQuery stark auf Javascript angewiesen. Umgekehrt enthält die Website "Think Vitamin" eine Lightbox, die nur mit CSS und XHTML erstellt wurde. Alexander Dawsons Semantic CSS3-Leuchtkasten ist auch IE-kompatibel. Dawson fügte dem Code etwas Javascript hinzu, um frühere Versionen von IE als IE 9 zu erkennen. Wenn eine IE-Version erkannt wird, wird anstelle von CSS ein transparentes PNG-Bild verwendet, das üblicherweise für den transparenten Hintergrund verwendet wird. Sie können auch die ColorBox von Jack Moore ausprobieren, die auch im IE 6 bis 9 funktioniert.

Hintergrunddeckkraft in Lightboxen und IE

Die Versionen 8 und früheren Versionen von Internet Explorer entsprechen zum Zeitpunkt der Veröffentlichung nicht den aktuellen CSS-Standards. Die mangelnde Kompatibilität stellt ein Problem für Lightboxes dar, insbesondere für Lightbox-Hintergründe, da CSS Deckkraft auf eine Weise erzeugt, die in jedem anderen modernen Webbrowser angezeigt wird. Vor CSS3 erstellten Webdesigner ein Element halbtransparent, indem sie das Attributtag "opacity" oder die Klasse im Stylesheet verwenden, wie in:

Hintergrund {Hintergrund: # 000000; Höhe: 100% Breite: 100%; Deckkraft: 0, 5;}

Das Obige erstellt einen schwarzen Hintergrund, der zu 50 Prozent transparent ist und die Seite ausfüllt.

Ändern der Deckkraft für die Arbeit mit dem IE

Glücklicherweise ist nicht alles verloren, wenn es darum geht, die Transparenz des Hintergrundelements Ihrer Lightbox in Internet Explorer festzulegen. Während das "Deckkraft" -Attribut nicht funktioniert, wird der "Filter" verwendet. Fügen Sie in jedem Element, das "Deckkraft" verwendet, das Filterattribut hinzu, um dieses Element in Internet Explorer halbtransparent zu machen:

Hintergrund {Hintergrund: # 000000; Höhe: 100% Breite: 100%; Deckkraft: 0, 5; filter: alpha (Deckkraft = 50);}

Dieses Update funktioniert mit Internet Explorer 6 und höher und verursacht keine Anzeigeprobleme in anderen Browsern.

CSS3

Je mehr CSS3 unterstützt wird, desto mehr Leuchtkästen nutzen die erweiterten Designfunktionen. Mit CSS3 können Sie eine einzelne Farbe in einem Element als transparent festlegen, indem Sie die Farbe in RGB-Werten definieren und zusätzlich eine "Alpha" -Einstellung festlegen, bei der die Deckkraft zwischen 0 und 1 definiert ist. Beispielsweise sieht ein blauer Hintergrund mit 50% Transparenz aus so was:

Hintergrund: rgba (0, 0, 255, 0, 5);

Internet Explorer 8 und frühere Versionen unterstützen diese Funktion nicht. Daher wird jeder Hintergrund der Lightbox, der diese Funktion verwendet, als vollständig transparent angezeigt.