Firefox と Opera で表のセル内の画像に Max-Width が適用されないのはなぜですか?

Firefox と Opera の表示の最大幅を無視する: Table-Cell

指定された CSS コード スニペットでは、テーブル内に含まれる画像cell は、Firefox および Opera ブラウザーで指定された最大幅スタイルを無視します。原因を理解し、ブラウザ間での解決策を見つけることが重要です。

W3C 仕様で明確にされているように、max-width はインライン要素には適用されません。画像の表示プロパティをブロックに設定しようとしても、問題は解決しません。

この動作を修正するには、display: table を含むラッパー div を、テーブル セルを含む div の周囲に追加する必要があります。さらに、ラッパー div には table-layout:fixed プロパティを含める必要があります。この変更により、前述のすべてのブラウザで max-width が確実に尊重されるようになります。

クロスブラウザ ソリューション

以下の更新されたコード スニペットは、効果的に問題を解決します。

<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>

このコードでは、テーブル セルのラッパー div がテーブル div 内に配置され、テーブル レイアウトが固定に設定されます。この構成により、Firefox や Opera などのブラウザ間での一貫性が確保されます。

以上がFirefox と Opera で表のセル内の画像に Max-Width が適用されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。