Comment puis-je implémenter avec succès le « pied de page collant » de Flexbox dans Internet Explorer 11 ?

Flexbox dans Internet Explorer 11 : Explorer les obstacles potentiels

Naviguer dans le domaine de CSS flexbox peut être une tâche ardue, surtout si l'on considère les différentes niveaux de compatibilité du navigateur. Alors que la plupart des navigateurs modernes prennent en charge flexbox de manière transparente, Internet Explorer 11 présente un défi notable. Un problème survient lorsque l'on tente d'implémenter l'exemple « Sticky Footer » de « Résolu par Flexbox » sans induire un comportement inattendu.

Pour approfondir la solution, il est crucial de comprendre l'impact de display:flex sur le < html> et largeur : 100 % sur le éléments. Selon CanIUse, IE10 et IE11 interprètent flex:1 différemment des autres navigateurs en raison d'une divergence historique par rapport au projet de spécification. Par défaut, ils attribuent 0 0 auto au lieu de 0 1 auto aux éléments flex.

Pour résoudre ce problème, ajustez le paramètre flex à 1 0 0 dans votre CSS. Cette modification devrait atténuer le problème, au moins partiellement. Cependant, ce changement peut involontairement perturber les fonctionnalités de Firefox. Pour atténuer cela, utilisez des hacks de ciblage spécifiquement pour Mozilla afin de ramener flex à sa valeur prévue.

Par exemple :

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

N'oubliez pas que flexbox reste une recommandation de candidat du W3C, ce qui contribue aux disparités. dans les interprétations du navigateur. À mesure que la spécification sera finalisée, on s'attend à ce que ces incohérences diminuent.

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!