Firefox と Opera で「max-width」が「display: table-cell」内の画像を無視するのはなぜですか?

ブラウザ内での max-width との不一致 表示内: table-cell

特定の状況では、max-width スタイル プロパティが表示内で無視されます。 : Chrome と IE では正しく表示される場合でも、Firefox と Opera ではテーブル セル要素が表示されます。この不一致により、その原因と最も適切な解決策について疑問が生じます。

原因

W3C 仕様によれば、max-width はインライン要素には適用されません。ただし、display: table-cell 内の画像はほとんどのブラウザでブロック状とみなされますが、Firefox と Opera ではインラインとして扱われます。この解釈の違いにより、一貫性のない動作が発生します。

回避策

回避策の 1 つは、display: table-cell ラッパー div を、display: table と を含む別の div 内に配置することです。テーブルレイアウト: 固定。これにより、Firefox と Opera は最大幅ルールを遵守するようになります。

例

<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>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
    </p>
  </div>
</div></code>

推奨事項

標準に準拠したアプローチでは、表示内の画像を含むインライン要素で max-width を使用しないようにします: table-cell。代わりに、そのような要素の幅を制御する別の方法を使用してください。

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