molily: DOCTYPES / CSS-Hacks / QUIRKS - Durchblick fehlt

Beitrag lesen

Bleib bei Strict. Das Problem dieser Lösung ist nicht, dass sie im IE nicht funktioniert - sondern die problematische Weise, wie mit dem Attributselektor versucht wird, CSS-Eigenschaften für den IE zu vergeben und dann für andere Browser wieder zu übeschreiben. Der Autor hat einfach nicht erkannt, dass der IE 7 den Attributselektor, jedoch noch nicht display:table/table-cell kennt. Damit geht sein Konzept des Überschreibens für Browser, die das sehr wohl können, nicht mehr auf. Der Ansatz zur vertikalen Zentrierung funktioniert aber auch im IE 7, auch im standardkonformen Modus.

Lösung:
Schreibe ein Stylesheet für standardkonforme Browser. Schreibe ein Stylesheet für den IE und binde es mit <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=Conditional Comments> ein.

<style type="text/css">
#outer { height: 400px; overflow: hidden; }
#outer { display: table; }
#middle { display: table-cell; vertical-align: middle; }
</style>

<!--[if lt IE 8]>
<style type="text/css">
#outer { position: relative; }
#middle { position: absolute; top: 50%;}
#inner { position: relative; top: -50%}
</style>
<![endif]-->

Mathias