Comment résoudre les problèmes de mise en page Flexbox dans Internet Explorer 11 ?

Dépannage d'IE Flexbox : surmonter les incompatibilités

Flexbox, un outil de mise en page puissant, peut présenter des défis lorsqu'il est utilisé dans Internet Explorer 11. Pour résoudre ce problème problème, examinons les problèmes spécifiques rencontrés et explorons les solutions de contournement potentielles :

1. Problèmes d'analyse avec la propriété Flex

IE a parfois du mal à analyser la propriété flex abrégée. Pour surmonter ce problème, envisagez plutôt d'utiliser les propriétés longues :

/* Not working in IE11 */
flex: 0 0 35%;

/* Alternative */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 35%;

2. Activation de Flex-Shrink

Dans certains cas, l'activation de Flex-Shrink peut résoudre le problème :

/* Not working in IE11 */
flex: 0 0 35%;

/* Alternative */
flex: 0 1 35%;

3. Précautions concernant les valeurs en pourcentage et sans unités pour Flex-Basis

Vérifiez votre version d'IE11, car le comportement avec les valeurs en pourcentage et sans unités pour flex-basis peut varier. Expérimentez avec ces variantes :

/* Variations */
flex: 1 1 0;
flex: 1 1 0px;
flex: 1 1 0%;

4. Utiliser 'flex: auto' au lieu de 'flex: 1'

'flex: 1' peut entraîner un comportement inattendu lors du basculement entre les directions de flexion. Pensez plutôt à utiliser « flex : auto » :

/* Issue with 'flex: 1' */
flex-direction: row;
@media (max-width: 768px) {
    flex-direction: column;
}

/* Alternative with 'flex: auto' */
flex: auto;
@media (max-width: 768px) {
    flex-basis: auto;
}

5. Revenir aux propriétés traditionnelles de largeur/hauteur

Si tout le reste échoue, l'utilisation des anciennes propriétés de largeur et de hauteur peut fournir une solution :

/* Not working in IE11 */
flex: 0 0 35%;

/* Alternative */
width: 35%;
height: 200px;

6. Utilisation de la disposition en bloc

Envisagez de remplacer la disposition flexible par une disposition en bloc dans des scénarios spécifiques :

/* Not working in IE11 */
#footer-container > article {
    display: flex;
    flex-direction: column;
}

/* Alternative */
#footer-container > article {
    display: block;
}

En mettant en œuvre ces solutions de contournement, vous pouvez contourner les défis posés par IE 11 et utiliser efficacement flexbox dans vos mises en page.

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!