Pourquoi « max-width » se comporte-t-il différemment dans Firefox et Opera pour les images dans les cellules d'un tableau ?

Comprendre la disparité de comportement de largeur maximale entre Firefox et Opera

Dans le développement Web, il est impératif de garantir la compatibilité entre navigateurs. Un domaine où des divergences surviennent est la gestion des styles CSS dans les cellules du tableau. Dans ce cas, Firefox et Opera présentent des comportements différents de Chrome et IE en ce qui concerne la propriété max-width.

Considérez le code HTML et CSS suivant :

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

Dans Chrome et IE, ce code définit correctement la largeur maximale de l'image à 100 % de la cellule contenant. Cependant, dans Firefox et Opera, le style max-width est ignoré.

Pourquoi cet écart ?

La spécification du World Wide Web Consortium (W3C) indique que max-width La largeur ne s'applique pas aux éléments en ligne. Les éléments en ligne, tels que les images, n'ont pas de largeur ou de hauteur intrinsèque, et leurs dimensions sont généralement déterminées par le contenu qu'ils contiennent.

Dans l'exemple fourni, la balise d'image est un élément en ligne dans la cellule du tableau. Par conséquent, le style de largeur maximale n'a aucun effet.

Une solution qui fonctionne

Pour résoudre ce problème et garantir la compatibilité entre navigateurs, vous pouvez adopter l'approche suivante :

1. Enveloppez la cellule div du tableau dans une autre div avec display: table et table-layout: corrigé.
2. Cela oblige Firefox et Opera à appliquer la règle de largeur maximale à l'image dans la cellule du tableau.

Le HTML et le CSS mis à jour :

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

En implémentant cette solution de contournement, vous pouvez conserver le comportement souhaité dans tous les principaux 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!