StartseiteWebHtml/css

Internet Explorer

22. AUGUST 2011
von Jörg
Web - Html/css

Hacks für den Internet Explorer
Transparenz im Internet Explorer 6

Hacks für den Internet Explorer

Manchmal kommt man nicht drum herum: Man codiert nach bestem Wissen und Gewissen und nutzt div-Boxen, sooft es geht, doch die Internet Explorer 6 und 7 zeigen das Layout ganz anders an als die übrigen Browser. Hacks sind dann die Lösung. Sie sind dazu da, fehlende oder falsche Interpretationen wieder geradezubiegen. Damit aber nicht alle Browser darunter leiden, werden die Hacks für den Internte Explorer in der Regal in ein seperates CSS geschrieben und nur dann geladen, wenn die Seite mit dem IE geöffnet wird. Die Indexdatei sollte dazu im head-Bereich folgende Anweisung bekommen:

01
02
03
<!--[if IE]>
<link rel="stylesheet" href="ieonly.css" type="text/css" />
<![endif]-->
Der Inhalt dieser Browserweiche wird von allen IEs ab Version 5.0 gelesen.

01
<!--[if IE 6]>
Dieser gilt für alle 6er-Versionen...

01
<!--[if lt IE 7]>
..dieser für alle Versionen vor 7 (lt steht für less-than = kleiner als) ...

01
<!--[if lte IE 5.5999]>
...dieser für alle Versionen bis 5.5 (less-than or equal = kleiner oder gleich)...

01
<!--[if gte IE 5.5]>
...und dieser gilt für alle Versionen ab 5.5 (greater-than or equal = größer oder gleich).

Mit diesen Browserweichen trifft man die Vorentscheidung welcher Browser die CSS lesen soll. Um Innerhalb der css zu unterscheiden benutzt man die Hacks:

Der Stern-HTML-Hack

01
* html element {eigenschaft: wert;}
Dieser Hack wird von IE6 und 5 gelesen un besteht aus einem Universal-Selektor(*) und einem HTML-Selektor. Wichtig ist der Zwischenraum zwischen beiden Selektoren.

Der Stern-Plus-HTML-Hack

01
*+html element {eigenschaft: wert;}
Dieser Hack kann nur von IE7 gelesen werden.

Der Kind-Selektor

01
html>body element {eigenschaft: wert;}
Der Kind-Selektor kann von keinem Internet Explorer gelesen werden. Er besteht aus dem html-Selektor und dem body-Selektor, verbunden ohne Freiraum mit einem Größer-als-Selektor. Er eignet sich sehr gut, um Formatierungen vor dem Internet Explorer zu verstecken.

!important

01
element {eigenschaft: wert !important; eigenschaft: wert;}
Eigentlich ist die Anweisung !important dafür gedacht, den Wert einer Eigenschaft vorzuziehen, sofern das Element ein zweites Mal mit der gleichen Eigenschaft auftauch. Der Internet Explorer ignoriert aber diese Anweisung und liest nur den Wert, der ohne !important ausgewiesen ist.

Der Attribut-Selektor

01
element[attributname] {eigenschaft: wert;}
Wie !important wird auch der Attribut-Selektor nicht vom IE interpretiert und eigent sich dafür, Anweisungen vom Internet Explorer fernzuhalten.

Transparenz im Internet Explorer

Wer transparente Bilder mit PNG-Format auf seiner Homepage benutzt, kennt das Leiden im IE6. Die Transparenz von PNG wird von älteren Browsern, vor allen vom Internet Explorer 6, nicht richtig interpretiert. Hier wird gezeigt wie man den alten Schuh IE6 auch indirekt Transparenz beibringen kann.

Der PNG-Fix

Der PNG-Fix ist ein Zusammenschluss einer Javascript-Datei, einem transparenten GIF und einem Eintrag in der index.php. Man muss lediglich nur die url der zwei Dateien in der index.php angeben:

01
02
03
04
<!--[if IE 6]><style type="text/css">
img { behavior: url(/js/iepngfix.htc) }
</style> 
<![endif]-->

In diesem Fall liegen die GIF-Datei und die iepngfix.htc im Verzeichnis 'js'.
Hierals ZIP-File zum herunterladen. Wichtig ist das beide Dateien im gleichen Ordner sind.

Hinweis: Dieser Fix funktioniert leider nur bei PNG-Bildern die direkt mit einem img-Tag in die Webseite eingebunden sind. Auf PNG-Bilder in CSSs hat dieser Fix keinen Einfluss.


Transperenz im IE6 per CSS (AlphaImageLoader)

Ganz ohne Javascript geht es mit einem Filter der als offizielle Methode von Microsoft gilt.
Hier werden speziell die PNG-Bilder angesprochen die in einer CSS vorher als Background definiert wurden.
Vor dem Hack kommt zuerst der Code für andere Browser, die transparente PNG Files unterstützen. Anschließend wird über einen CSS-Hack der IE6 Code eingebunden:

01
02
03
04
05
06
07
08
<style type="text/css">
#layer { background-image:url(bild.png); }
</style>
<!--[if IE 6]>
<style type="text/css">
#layer { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', sizingMethod='scale'); }
</style>
<![endif]-->
Natürlich ist es wohl besser den CSS-Code in eine externe CSS-Datei auszulagern.

Hinterlasse einen Kommentar

Ein Frosch der sich an der Seite festhält