Pourquoi IE ne respecte-t-il pas la « hauteur : 100 % » pour les éléments enfants des cellules de tableau ?

IE ignore la hauteur : 100 % pour les éléments enfants des cellules de tableau

Le problème survient lors de l'utilisation de tables CSS dans IE8 et versions ultérieures pour construire dynamiquement des tables . Malgré la spécification revendiquant une prise en charge complète des propriétés d'affichage associées, IE se comporte de manière inattendue, ignorant la hauteur : 100 % définie pour l'élément enfant (« Contenu ») dans la cellule du tableau (« Elem »). Cela conduit à un affichage déformé où la hauteur de l'élément enfant est coupée.

Cause sous-jacente :

La cause de cet écart réside dans la spécification CSS elle-même. La spécification laisse l'effet des valeurs de pourcentage pour la hauteur sur display: table-row et display: table-cell éléments indéfinis. Cela signifie que les implémentations de tableaux CSS dans les navigateurs ont des comportements variables en ce qui concerne les hauteurs de pourcentage.

Solutions de contournement :

Compte tenu de la variabilité de l'implémentation des navigateurs, trouver une application CSS uniquement entre navigateurs la solution n’est peut-être pas réalisable. Cependant, il existe plusieurs approches alternatives à considérer :

• Solution de contournement JavaScript : Utilisez JavaScript pour calculer et définir dynamiquement la hauteur de l'élément enfant en fonction de la hauteur de la table parent.
• Solution sans table : Évitez d'utiliser des tableaux CSS et implémentez plutôt la mise en page en utilisant d'autres méthodes comme flexbox ou grid disposition.
• Hauteur fixe : Définissez une hauteur fixe spécifique pour l'élément enfant, en vous assurant qu'il tient dans la cellule du tableau.

Incompatibilité du navigateur :

Il est important de noter que ce problème affecte toutes les versions d'IE jusqu'à la 11 incluse. Par conséquent, s'appuyer sur un hack CSS spécifique à IE peut ne pas résoudre le problème dans toutes les versions d'IE.

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!