表のセル内の画像に対して Firefox と Opera で「max-width」の動作が異なるのはなぜですか?

Firefox と Opera の間の最大幅の動作の違いを理解する

Web 開発では、ブラウザ間の互換性を確保することが不可欠です。矛盾が生じる領域の 1 つは、表のセル内の CSS スタイルの処理です。この例では、Firefox と Opera は、max-width プロパティに関して Chrome や IE と比較して異なる動作を示します。

次の HTML および CSS コードを考えてみましょう。

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

Chrome の場合および IE の場合、このコードは画像の最大幅を、含まれるセルの 100% に正しく設定します。ただし、Firefox と Opera では、max-width スタイルは無視されます。

なぜ矛盾があるのですか?

World Wide Web Consortium (W3C) 仕様では、max-width スタイルが次のように規定されています。 width はインライン要素には適用されません。画像などのインライン要素には固有の幅や高さがなく、通常、その寸法は含まれるコンテンツによって決まります。

この例では、画像タグはテーブル セル内のインライン要素です。したがって、max-width スタイルは効果がありません。

有効な解決策

この問題を解決し、ブラウザ間の互換性を確保するには、次のアプローチを採用できます。 :

1. display:table および table-layout:fixed を使用してテーブルのセル div を別の div でラップします。
2. これにより、Firefox と Opera は画像に最大幅ルールを適用するようになります。

更新された HTML と CSS:

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

この回避策を実装すると、すべての主要なブラウザで望ましい動作を維持できます。

以上が表のセル内の画像に対して Firefox と Opera で「max-width」の動作が異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。