19

次のようなマークアップがあります。

<div class="account-picture">
    <img src="http://i.imgur.com/Mcr3l.png">
</div>

div左に浮かせる必要があります。画像は128px×128pxです。

そしていくつかのcss：

.account-picture{
   float: left;
   background: #FFFFFF;
   padding: 10px;
   border: 1px solid red;
   font-size: 1px;
   overflow: hidden;
}

img{
   border: 1px solid #F8F8F8;
   overflow: hidden;
}

しかし問題は、div に余分な高さが割り当てられているように見えることです。firebug のレイアウト図は次のとおりです。 ここに画像の説明を入力

div の高さが 2 ピクセル増えるのはなぜですか? ブラウザーによって異なるのはなぜですか?

  • Firefox 12: 2px 追加
  • IE9: 0.26px 余分
  • Chrome: 0px 余分。

そして、ここにフィドルがあります：http://jsfiddle.net/mWe5Y/

なぜこれが起こっているのですか? また、その余分な「高さ」を取り除くにはどうすればよいですか?

4

1 に答える 1

34

img はインライン要素だからです。

その余分な高さを取り除くには:

.account-picture img {
    display: block;
}
于 2012-05-03T07:20:22.867 に答える