Pourquoi « max-width » ignore-t-il les images à l'intérieur de « display : table-cell » dans Firefox et Opera ?

Incohérences du navigateur avec max-width Affichage intérieur : table-cell

Dans certaines circonstances, la propriété de style max-width est ignorée dans l'affichage : éléments de cellule de tableau dans Firefox et Opera, même s'ils s'affichent correctement dans Chrome et IE. Cette incohérence soulève des questions sur sa cause et sur la solution la plus appropriée.

Cause

Selon la spécification W3C, max-width ne s'applique pas aux éléments en ligne. Cependant, les images dans display: table-cell sont considérées comme des blocs dans la plupart des navigateurs, tandis que Firefox et Opera les traitent comme en ligne. Cette différence d'interprétation entraîne un comportement incohérent.

Solution de contournement

Une solution de contournement consiste à placer l'affichage : table-cell wrapper div à l'intérieur d'un autre div avec display : table et disposition de la table : corrigée. Cela oblige Firefox et Opera à respecter la règle de la largeur maximale.

Exemple

<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>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
    </p>
  </div>
</div></code>

Recommandation

Le plus L'approche conforme aux normes consiste à éviter d'utiliser max-width sur les éléments en ligne, y compris les images dans display: table-cell. Utilisez plutôt des méthodes alternatives pour contrôler la largeur de ces éléments.

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!