Comment puis-je faire en sorte que Flexbox fonctionne de manière cohérente sur tous les navigateurs, y compris Internet Explorer 11 ?

Flexbox et Internet Explorer 11 : Display:flex dans ?

Dans le but d'abandonner les mises en page « flottantes » et En adoptant CSS flexbox, on peut rencontrer des problèmes de compatibilité dans Internet Explorer 11. Alors que les principaux navigateurs prennent généralement en charge flexbox, IE11 présente certains défis.

L'énigme du "Sticky Footer"

L'exemple "Sticky Footer" de "Résolu par Flexbox" a rencontré un problème dans IE11. En ajoutant display:flex au element et width:100% au , cependant, le problème a été résolu. Comprendre la justification de cette solution de contournement est crucial.

Les valeurs par défaut de flex dans IE10 et IE11 divergent du projet de spécification, ce qui entraîne un comportement incohérent lorsqu'elles sont rencontrées avec des déclarations CSS telles que flex:1. Le modifier à 1 0 0 garantit la compatibilité entre les navigateurs.

S'attaquer à l'énigme des « objets multimédias »

L'exemple « Objets multimédias » se heurte à un obstacle supplémentaire dans IE11. Diverses tentatives de manipulation du CSS n'ont abouti à aucun succès. Malheureusement, une solution propre pour obtenir des fonctionnalités dans IE11 reste insaisissable.

Considérations de compatibilité

La solution de contournement susmentionnée pour l'exemple "Sticky Footer" peut perturber par inadvertance le rendu de Firefox. Pour résoudre ce problème, utilisez des hacks qui ciblent spécifiquement Mozilla, comme indiqué ci-dessous :

@-moz-document url-prefix() {
  #flexible-content {
    flex: 1;
  }
}

Les fournisseurs de navigateurs peuvent interpréter flexbox différemment en raison de son statut de candidat au W3C. Toutefois, cette situation devrait se stabiliser à mesure que la norme évolue. Toute solution alternative serait grandement appréciée.

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!