Pourquoi Firefox et Opera ne respectent-ils pas la largeur maximale des images affichées : table-cell ?

Résolution de l'ignorance de la largeur maximale dans Firefox et Opera dans Display : table-cell

Malgré la spécification de la largeur maximale pour les images, Firefox et Opera ignorent ce style dans display: table-cell. Cela peut entraîner un comportement inattendu lorsque vous tentez de limiter la largeur des images dans des structures de type tableau.

Raison de l'ignorance de la largeur maximale

Selon la spécification du W3C, la propriété max-width ne s'applique pas aux éléments en ligne. Les images, par défaut, sont des éléments en ligne. Par conséquent, dans une cellule de tableau (qui agit comme un élément en ligne), la largeur maximale n'est pas prise en compte.

Solution de contournement et conformité aux normes W3C

Une solution de contournement consiste à imbriquer le conteneur div de cellule de tableau dans un autre div qui a display: table et table-layout: corrigé. En définissant ces propriétés sur le conteneur parent, Firefox et Opera respectent la règle de largeur maximale pour les images dans les cellules du tableau.

Cette solution garantit la conformité à la spécification W3C, car elle ne modifie pas la nature en ligne par défaut d’images affichées : tableau-cellule. Il ajoute simplement une structure de tableau au conteneur parent, obligeant les navigateurs à traiter les cellules internes comme des cellules de tableau plutôt que comme des éléments en ligne.

Exemple

Vous trouverez ci-dessous un exemple de cette solution de contournement en action :

<code class="html"><div style="display: table;">
  <div style="display: table-cell; padding: 15px; width: 200px;">
    <img src="image.png" style="max-width: 100%;" />
    <p>Content goes here...</p>
  </div>
</div></code>

En utilisant cette technique, vous pouvez conserver la mise à l'échelle de l'image souhaitée dans les cellules du tableau tout en garantissant la compatibilité entre 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!