Comment obtenir une mise en page de type Flexbox dans IE9 avec Modernizr et les solutions de secours CSS ?

Alternative Flexbox pour IE9 : exploiter Modernizr et les solutions de secours CSS

Alors que Flexbox a révolutionné la mise en page CSS dans les navigateurs modernes, la prise en charge des navigateurs existants comme IE9 est présente un défi unique. Pour éviter les feuilles de style spécifiques au navigateur, explorons une alternative efficace.

Modernizr : Détection des fonctionnalités du navigateur

Modernizr est une bibliothèque JavaScript légère qui détecte les fonctionnalités du navigateur. Il ajoute des classes à l'élément HTML pour indiquer la prise en charge de diverses fonctionnalités, notamment Flexbox.

Styles de secours avec CSS

Utilisez les classes de Modernizr pour fournir des styles de secours pour IE9 :

<code class="css">.container {
    display: flex;
}
.no-flexbox .container {
    display: table-cell;
}</code>

Cela garantit que le conteneur s'affichera de manière flexible dans les navigateurs pris en charge, tout en revenant à une disposition de cellules de tableau dans IE9 et d'autres navigateurs non pris en charge.

Exploiter les informations d'experts

Exploiter les informations d'experts

• Les présentations de Zoe Gillenwater sur Flexbox offrent des informations précieuses pour s'adapter aux navigateurs existants :
• Affichage : bloc en ligne pour l'espacement de navigation horizontal
• Affichage : tableau- cellule pour épingler des éléments sans Flexbox
• Alignement des formulaires à l'aide de solutions de repli

Exemple de mise en page avec et sans commande Flexbox

Conclusion

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!