Pourquoi « max-width : 100 % » sur une image à l'intérieur d'une cellule de tableau se comporte-t-il différemment dans Firefox et Opera par rapport à Chrome et IE ?

Différence dans le comportement de la propriété Max-Width dans Firefox et Opera

Dans certains scénarios, les navigateurs Firefox et Opera présentent un écart par rapport à Chrome et IE dans l'interprétation du CSS max -propriété de largeur. Plus précisément, lorsqu'une image est placée dans une cellule de tableau (affichage : table-cell) et qu'une largeur maximale : 100 % lui est attribuée, la largeur de l'image est ignorée dans Firefox et Opera, alors qu'elle est correctement contrainte dans les autres navigateurs.

Pour comprendre la raison de ce comportement, il est crucial de noter que la propriété CSS max-width est définie dans la spécification W3C pour s'appliquer uniquement aux éléments de niveau bloc. Les éléments en ligne, tels que , ne sont pas affectés par cette propriété. Dans le code HTML fourni, le symbole L'élément est défini sur display: inline par défaut, ce qui explique pourquoi Firefox et Opera ignorent le style de largeur maximale.

Solution de contournement :

Pour résoudre ce problème et appliquer la largeur d'image prévue, il est nécessaire pour définir explicitement le élément à afficher : bloc dans les styles CSS. Cependant, l'utilisation de cette solution de contournement peut modifier la mise en page et le formatage.

Solution conforme :

Une solution conforme aux normes consiste à placer la cellule du tableau (affichage : table-cell) dans un div wrapper. qui est défini pour afficher : table et table-layout : corrigé. Cette approche garantit que tous les éléments enfants du tableau respectent les contraintes de largeur spécifiées, y compris l'attribut élément avec une largeur maximale : 100 %.

Approche alternative :

Une autre option consiste à utiliser JavaScript pour détecter la prise en charge par le navigateur de la largeur maximale dans l'affichage : les éléments de cellule de tableau. Si le navigateur ne prend pas en charge ce comportement de manière native, une stratégie de mise en page alternative peut être implémentée à l'aide de JavaScript.

Exemple de code :

<code class="HTML"><div style="display: table;">
    <div style="display: table-cell; padding: 15px; width: 200px;">
        <img src="..." style="display: block; max-width: 100%" />
        <p>Text content...</p>
    </div>
</div></code>

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!