Browseroptimierung…wer kennt das nicht. Man baut sich eine nette Website zusammen und will sich dann sicherhaltshalber mal ansehen, wie diese im ie6 aussieht. Oft kommt hier das groĂźe Erschrecken, wenn man dieses Problem nicht vorher bedacht hat. Als erfahrener Webentwickler weiĂź man natĂĽrlich so einige Verhaltensweisen der verschiedenen Browser und bezieht diese schon beim Bau der Website mit ein.
Wenn man dies aber nicht gemacht hat und aber nicht nochmal alles neu bauen möchte, kommen die sogenannten CSS-Hacks ins Spiel. So kann man mit ein Wenig Arbeit zum Beispiel dem Internet Explorer 6 mitteilen, wie er sich an einem spieziellen Element verhalten soll.
Es gibt spezielle Selektoren, die nur von bestimmten Browsern akzeptiert oder ĂĽberhaupt erst beachtet werden. So kann man ganz spezielle nur diesen Browser ansprechen und die Darstellung in diesem entsprechend anpassen.
Die nachfolgende Auflistung zeigt die Browser und die dazugehörigen Selektoren, welche nur von diesen interpretiert werden:
IE 6 (und darunter) [Star-HTML-Hack]
* html #div_container { … }
IE 7 (und darunter) [Star-Plus-HTML-Hack]
*:first-child+html #div_container { … }
IE 7 und moderne Browsers [Kind-Selektor]
html>body #div_container { … }
Moderne Browsers (ohne IE 7)
html>/**/body #div_container { … }
Opera 9.27 (und darunter)
html:first-child #div_container { … }
Safari
html[xmlns*=""] body:last-child #div_container { … }
Safari 3+, Chrome 1+, Opera9+, FF 3.5+
body:nth-of-type(1) #div_container { … }
Safari 3+, Chrome 1+, Opera9+, FF 3.5+
body:first-of-type #div_container { … }
Safari 3, Chrome 1+
@media screen and (-webkit-min-device-pixel-ratio:0) {
#div_container { … }
}
Eine ausfĂĽhrlichere Ausarbeitung dazu gibts unter http://standards.webmasterpro.de/index-article-CSS+Hacks.html