Min-Height auch für den IE
Von Joachim Krammer | CSS-Browser
Na, es geht doch! Bisher habe ich - vermutlich aufgrund schlampiger Recherchen - immer gedacht, man brächte den IE/Win nicht dazu, einem Container eine minimale Höhe (oder auch Breite, wie auch immer) zuzuweisen, sodass sich der Container jedoch bei größerem Inhalt mitvergrößert (bei den anderen Browsern).
Jetzt hab ich aus aktuellem Anlass mal das Internet durchwühlt und bin bei CSS-Diskuss fündig geworden:
#container {
height: 300px; /* das hier für den ie */
background-color: red;
}
/* folgende anweisung wird nicht vom ie interpretiert */
#container[id] {
height:auto;
min-height:300px;
}
Ein Beispiel könnt ihr hier sehen.
Unter Anwendung des Attribut-Selektors, welchen der IE nicht kennt, weist man im Nachhinein den anderen Browsern die ebenfalls korrekte CSS-Definition zu! Somit wird die Definition der Höhe für alle Browser außer dem IE (alle = jene, die den Attribut-Selektor interpretieren können) auf “auto” zurückgesetzt, danach wird eine Mindesthöhe zugewiesen!
Das ganze ist nicht einmal ein richtiger Hack, sondern vielmehr das Ausnützen der Schwächen des IE!
Ok, sollte der Einwand kommen, man könne auch den Child-Selector verwenden, dann sage ich: Stimmt :)
Diese Lösung sähe dann wie folgt aus:
#container { /* für alle */
height: 300px;
}
html>body #container { /* be nice to opera (&gekko) */
height: auto;
min-height: 300px;
}