なぜ Firefox と Opera は表示内の画像の最大幅を尊重しないのですか: table-cell?

ディスプレイ内の Firefox および Opera での最大幅無視への対処: table-cell

画像の最大幅の仕様にもかかわらず、Firefox Opera では、表示内のこのスタイル: table-cell が無視されます。これにより、テーブルのような構造で画像の幅を制限しようとすると、予期しない動作が発生する可能性があります。

Max-Width を無視する理由

W3C 仕様によれば、 max-width プロパティはインライン要素には適用されません。デフォルトでは、画像はインライン要素です。したがって、テーブル セル (インライン要素として機能する) 内では、max-width は無視されます。

回避策と W3C 標準への準拠

回避策の 1 つは、それを含むセルをネストすることです。 display: table および table-layout:fixed を持つ別の div 内の table セル div。親コンテナでこれらのプロパティを設定することにより、Firefox と Opera の両方がテーブル セル内の画像の最大幅ルールを尊重します。

このソリューションは、デフォルトのインライン特性を変更しないため、W3C 仕様への準拠を保証します。表示内の画像: テーブルセル。これは単純にテーブル構造を親コンテナに追加し、ブラウザが内部セルをインライン要素ではなくテーブル セルとして扱うように強制します。

例

以下は例です。この回避策の実際の動作:

<code class="html"><div style="display: table;">
  <div style="display: table-cell; padding: 15px; width: 200px;">
    <img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy"   style="max-width:90%" alt="なぜ Firefox と Opera は表示内の画像の最大幅を尊重しないのですか: table-cell?" >
    <p>Content goes here...</p>
  </div>
</div></code>

この手法を使用すると、ブラウザ間の互換性を確保しながら、表のセル内で必要な画像のスケーリングを維持できます。

以上がなぜ Firefox と Opera は表示内の画像の最大幅を尊重しないのですか: table-cell?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。