Pourquoi la largeur maximale ne s'applique-t-elle pas aux images dans les cellules du tableau dans Firefox et Opera ?

Firefox et Opera ignorant la largeur maximale dans l'affichage : Table-Cell

Dans l'extrait de code CSS donné, l'image contenue dans un tableau cell ignore le style de largeur maximale spécifié dans les navigateurs Firefox et Opera. Comprendre la cause et trouver une solution multi-navigateurs est crucial.

Comme précisé dans les spécifications du W3C, max-width ne s'applique pas aux éléments en ligne. Malgré les tentatives visant à définir la propriété d'affichage de l'image sur bloquer, le problème persiste.

Pour corriger ce comportement, un div wrapper avec display: table doit être ajouté autour du div contenant la cellule du tableau. De plus, le div wrapper doit inclure la propriété table-layout:fixed. Cette modification garantit que la largeur maximale est respectée dans tous les navigateurs mentionnés.

Solution multi-navigateurs

L'extrait de code mis à jour ci-dessous résout efficacement le problème :

<code class="css"><div style="display: table">
  <div style="display: table-cell; width: 200px; table-layout: fixed;">
    <img src="my-image.jpg" style="max-width: 100%;" />
  </div>
</div></code>

Dans ce code, le div wrapper de la cellule du tableau est placé dans un div du tableau et la disposition du tableau est définie sur fixe. Cette configuration garantit la cohérence entre les navigateurs, notamment Firefox et Opera.

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!