Comment implémenter Flexbox pour IE9 et au-delà ?

Alternative Flexbox pour IE9

Les navigateurs modernes proposent le modèle CSS flexbox, offrant un moyen efficace de distribuer et d'aligner les éléments. Cependant, IE9 ne prend pas en charge Flexbox.

Considérez l'implémentation suivante pour IE10 :

<code class="css">div#navContainer {
    display: flex; // Modern browsers
    display: -ms-flexbox; // IE10
}</code>

Pour remédier à l'absence de Flexbox dans IE9, envisagez d'incorporer Modernizr, une bibliothèque JavaScript qui détecte les fonctionnalités de Flexbox. Avec Modernizr, vous pouvez ajouter des styles de secours si nécessaire. Par exemple :

<code class="css">.container {
    display: flex;
}

.no-flexbox .container {
    display: table-cell;
}</code>

Référez-vous aux présentations de Zoe Gillenwater pour plus de conseils :

• Mise à niveau avec Flexbox :

  • Espacement de navigation horizontal : display: inline-block;
  • Épingler des éléments sans Flexbox: display: table-cell;
  • Alignement des solutions de secours des formulaires
  • Exemple avec et sans ordre flexible

• Mise en page CSS3 :

  • Utilisation du bloc en ligne avec Flexbox : formulaire horizontal
  • Utilisation du bloc en ligne avec Flexbox : navigation horizontale

Rappelez-vous :

• La prise en charge du navigateur pour IE10 est fiable.
• Le préfixe automatique gère les préfixes du navigateur.
• Modernizr propose des solutions de secours.
• L'adoption de Flexbox n'est pas exclusive.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!