5

ルートdivによって高さが定義されているdiv内で自動スケーリングする必要がある画像を使用しています。スケーリングはheight: 100%、画像自体を使用して、すべての主要なブラウザで問題ありません。ただし、一部のブラウザでは、画像コンテナがコンテンツ（画像）に応じて幅を調整していないようです。

ライブデモを自分で確認してください。

このデモでは、背景が青色の画像コンテナを使用しています。

予想される動作：コンテナの幅と高さはコンテンツ（画像）と同じである必要があるため、この背景は表示されません。

実際の動作：

  • Chrome 11、Safari 5、IE9では、動作は期待どおりです。

Chrome12の場合
（出典：imgh.us）

  • Firefox 3.6 /4.0およびOpera11では、動作が期待どおりではなく、青い背景が表示されます。

Opera11の場合
（出典：imgh.us）

主要なブラウザ間のこの大きな違いの根本的な原因は何ですか？

4

2 に答える 2

2

Firefox の場合、これはバグのように見えます。https://bugzilla.mozilla.org/show_bug.cgi?id=653739に提出しました

overflow:hidden実際に必要でない限り、削除することで回避できます。

于 2011-04-29T15:34:28.020 に答える
1

これらの新しいブラウザーはinline-block、より厳密に (正しく) 解釈します。

つまり、要素は (スパンのように) インラインで配置されますが、要素のコンテンツは要素がブロックであるかのようにレイアウトされます。

于 2011-04-29T13:19:48.427 に答える