Pourquoi IE ignore-t-il « Hauteur : 100 % » sur les éléments du tableau ?

Pourquoi IE ignore la hauteur : 100 % sur les éléments du tableau

Problème

Lors de l'utilisation de dispositions de tableau CSS avec display: table, display: table-row , et display: table-cell, la hauteur des éléments enfants définie sur 100 % est ignorée dans les navigateurs IE.

Explication

Malheureusement, la spécification pour la disposition des tableaux CSS n'est pas claire sur la façon de gérer pourcentages de hauteur pour les éléments enfants. En conséquence, les navigateurs ont implémenté ce comportement différemment. Dans IE, les hauteurs en pourcentage des cellules de tableau ne sont pas reconnues.

Impact

Cette incohérence peut entraîner des résultats inattendus, comme le montre la question, où le contenu à l'intérieur d'une cellule de tableau ne correspond pas comme attendu dans IE.

Solution

Étant donné qu'une solution de contournement CSS pure n'est pas réalisable en raison des problèmes d'interopérabilité, des approches alternatives doivent être envisagées :

• Utiliser JavaScript : Définissez dynamiquement les hauteurs des éléments enfants à l'aide de JavaScript.
• Utilisez une hauteur fixe : Spécifiez une hauteur fixe pour la table parent et les éléments enfants afin de garantir un affichage correct.
• Évitez la mise en page de tableau CSS : Envisagez d'utiliser des techniques de mise en page alternatives telles que la flexbox ou la grille CSS.

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!