1

固定サイズの3つの画像を想像してみてください。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
        div.photos img {
            width: 320px;
            height: 240px;
            background-color: black;
        }
    </style>
  </head>
  <body>
    <div class="photos">
        <img src="abc" />
        <img src="def" />
        <img src="ghi" />
    </div>
  </body>
</html>

IEやChromeでそのようなページを見ると、私が期待していたもの、つまり固定サイズの3つの画像が表示されます。
ただし、Firefoxでは機能しません。

しかし、画像を設定するdisplay: block;か削除するとDOCTYPE（jsfiddleには表示されません）、機能します。

私は何が間違っているのですか？
ありがとう

4

2 に答える 2

3

これはFirefoxの古い機能のようです。2007年からそれについての議論を見つけました。

ですから、それは意図的なものであり、消えることはないと思います。彼らはこのように考えているのではないかと思います。画像に寸法を設定すれば、すべてがうまくいきます。画像を拡大縮小します。ただし、画像が欠落している場合は、代わりに代替テキストをレンダリングします。これにより、img要素が置換されたインライン要素から、置換されていないインライン要素であるテキストに変更されます。そのため、仕様により、heightおよびをサポートしません。width代わりに、テキストが寸法を​​決定します。そしておそらくFirefoxの作者はこれが正しいことだと考えており、QuirksMdoeでのみ他のブラウザと同じようにしています。

属性を追加altすると（必要に応じて、すべてに属性が必要imgです）、テキストの長さによってボックスのサイズがどのように変化するかがわかります。どうやらFirefoxはaltここで欠落しているものをと同等に扱い、alt=""幅がゼロであることを意味します。

displayこれは、に設定するinline-block（または）が動作を変更する理由を説明しblockます：thenwidthおよびheightが適用されます。

于 2012-07-26T19:39:40.747 に答える
1

Firefoxは空の要素に高さと幅を適用しないと思う<img>ので、そのようにレンダリングする必要があるので、CSSを使用しますdisplay: block;

これが私のフィドルです

または、画像を使用して参照してください...

更新：フィドル

于 2012-07-24T19:29:50.277 に答える