Flexbox-Alternative für IE9

Moderne Browser bieten das Flexbox-CSS-Modell und bieten damit eine effiziente Möglichkeit, Elemente zu verteilen und auszurichten. Allerdings fehlt IE9 die Flexbox-Unterstützung.

Betrachten Sie die folgende Implementierung für IE10:

div#navContainer {
    display: flex; // Modern browsers
    display: -ms-flexbox; // IE10
}

Um das Fehlen von Flexbox in IE9 zu beheben, sollten Sie die Integration von Modernizr in Betracht ziehen, einer JavaScript-Bibliothek, die Flexbox-Funktionen erkennt. Mit Modernizr können Sie bei Bedarf Fallback-Stile hinzufügen. Zum Beispiel:

.container {
    display: flex;
}

.no-flexbox .container {
    display: table-cell;
}

Weitere Hinweise finden Sie in den Präsentationen von Zoe Gillenwater:

• Aufstieg mit Flexbox:

  • Horizontaler Navigationsabstand: Anzeige: inline- block;
  • Elemente ohne Flexbox anpinnen: Anzeige: Tabellenzelle;
  • Formular-Fallbacks ausrichten
  • Beispiel mit und ohne Flex-Reihenfolge

• CSS3-Layout:

  • Inline-Block mit Flexbox verwenden: horizontale Form
  • Inline-Block mit Flexbox verwenden: horizontale Navigation

Denken Sie daran:

• Die Browserunterstützung für IE10 ist zuverlässig.
• Autoprefixer verarbeitet Browser-Präfixe.
• Modernizr bietet Fallbacks.
• Die Einführung von Flexbox ist nicht exklusiv.