Maison > interface Web > tutoriel CSS > Pourquoi la hauteur « display: table-cell » ne fonctionne-t-elle pas de manière cohérente dans Internet Explorer ?

Pourquoi la hauteur « display: table-cell » ne fonctionne-t-elle pas de manière cohérente dans Internet Explorer ?

DDD
Libérer: 2024-11-17 08:13:03
original
887 Les gens l'ont consulté

Why Does `display: table-cell` Height Not Work Consistently in Internet Explorer?

Incohérences IE avec l'affichage : hauteur de cellule de tableau

Dans la poursuite de la construction dynamique d'un tableau pour l'affichage des données, de nombreux développeurs s'appuient sur le propriétés d'affichage : tableau, ligne de tableau et cellule de tableau. Bien que cette approche donne généralement les résultats attendus dans la plupart des navigateurs, IE présente une incohérence particulière.

Lors de la mise en œuvre de cette disposition de tableau, un problème courant survient dans IE : la propriété height définie pour display : les éléments de cellule de tableau sont ignorés. Cela entraîne un écart par rapport au résultat souhaité, le contenu dépassant ses limites prévues.

Malgré la suggestion de CanIUse d'une prise en charge complète de ces propriétés d'affichage dans IE8, l'expérience pratique montre le contraire. Le problème persiste non seulement dans IE8 mais s'étend à toutes les versions jusqu'à IE11.

Selon la spécification CSS 2.1, le comportement des valeurs en pourcentage pour la hauteur dans display: table-row et display: table-cell elements demeure indéfini. Cela laisse place à des incohérences dans la mise en œuvre entre les navigateurs. Par conséquent, s'appuyer uniquement sur des solutions de contournement CSS pures devient problématique car il n'y a aucune garantie d'interopérabilité.

Pour la compatibilité avec IE8, il devient évident que JavaScript ou une approche non basée sur CSS est nécessaire pour obtenir le comportement de hauteur souhaité pour cellules du tableau. Soulever un problème sur Microsoft Connect peut sensibiliser, mais jusqu'à ce qu'un changement de comportement soit mis en œuvre, des solutions alternatives doivent être explorées.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal