表のセル内の画像の「max-width: 100%」が、Chrome や IE と比べて Firefox や Opera で異なる動作をするのはなぜですか?

Firefox と Opera の Max-Width プロパティの動作の不一致

特定のシナリオでは、Firefox と Opera ブラウザーは、CSS 最大幅の解釈において Chrome や IE と比較して不一致を示します。 -width プロパティ。具体的には、画像がテーブル セル (表示: table-cell) 内に配置され、max-width: 100% が割り当てられている場合、画像の幅は Firefox と Opera では無視されますが、他のブラウザでは正しく制限されます。

この動作の背後にある理由を理解するには、CSS の max-width プロパティが W3C 仕様でブロックレベルの要素にのみ適用されるように定義されていることに注意することが重要です。 などのインライン要素は、このプロパティの影響を受けません。提供された HTML では、要素はデフォルトで display: inline に設定されています。これは、Firefox と Opera が最大幅のスタイル設定を無視する理由を説明しています。

回避策:

この問題を解決し、意図した画像幅を適用するには、次のことが必要です。 を明示的に設定するには表示する要素: CSS スタイル内のブロック。ただし、この回避策を使用すると、ページのレイアウトと書式が変更される可能性があります。

準拠の解決策:

標準に準拠した解決策は、テーブル セル (表示: table-cell) をラッパー div 内に配置することです。これは、表示: テーブルおよびテーブル レイアウト: 固定に設定されています。このアプローチにより、テーブル内のすべての子要素が、 要素を含む指定された幅の制約に従うようになります。 max-width: 100% の要素。

代替アプローチ:

別のオプションは、JavaScript を利用して、表示内の max-width に対するブラウザのサポートを検出することです: table-cell 要素。ブラウザがこの動作をネイティブにサポートしていない場合は、JavaScript を使用して代替レイアウト戦略を実装できます。

コード例:

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

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