Pourquoi mon enfant « display : table-cell » ignore-t-il « hauteur : 100 % » dans Internet Explorer ?

Affichage IE : table-cell L'enfant ignore la taille : 100 %

Problème :

Lors de l'utilisation de CSS pour créer dynamiquement une disposition de tableau, le div avec display: table-cell ignore la propriété height: 100% dans Internet Explorer 8 et éventuellement les versions ultérieures.

Réponse :

Avertissement : Ce problème est inhérent à l'absence de spécification claire pour les pourcentages de hauteur dans display : table-row et display : table-cell elements.

Malheureusement, le W3C La spécification ne définit pas comment les pourcentages de hauteur doivent être interprétés dans ces éléments, laissant le choix à l'implémentation du navigateur. Par conséquent, certains navigateurs, y compris les versions 8 à 11 d'Internet Explorer, peuvent gérer de manière incohérente les hauteurs de pourcentage dans les présentations de tableaux.

Solutions de contournement possibles :

• Évitez les hauteurs en pourcentage : Utilisez des hauteurs fixes ou absolues pour les cellules du tableau.
• Utilisez une méthode de mise en page de tableau différente : Pensez à utiliser CSS Grid, Flexbox ou une combinaison des deux pour évitez ce problème dans IE.
• Utilisez JavaScript : Utilisez JavaScript pour définir dynamiquement la hauteur des cellules du tableau.
• Exploitez un préprocesseur CSS : Utilisez un préprocesseur CSS comme Sass ou Less pour calculer et spécifier les valeurs de pixels pour les hauteurs des cellules du tableau.

Remarque :

Il est important de se rappeler qu'un pur La solution CSS peut ne pas être réalisable si vous devez prendre en charge Internet Explorer 8 et les versions ultérieures, car le comportement est incohérent entre ces navigateurs.

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!