带边框/轮廓/边距/填充的怪异Bug

Question

HTML(3倍):

<div class="scream">
  <div class="author">
    <img src="avatars/dagrevis.png" alt="" title="daGrevis" />
  </div>
  <div class="data">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</span>
  </div>
  <div class="clearer"></div>
</div>

CSS:

.scream {
  background: #F4F4F4;
  width: 944px; height: 48px;
}

.scream .author {
  float: left;
}

.scream .data {
  float: left;
}

.clearer { clear: both; }

这是它在我的浏览器上的样子:

如您所见,height设置为48px.图像大小也是48px.怎么说我没有看到每个div.scream分开的线？height例如,如果我设置为50px,那么一切正常!在我看来,这是因为有某种边界/轮廓/边缘/填充破坏了我的生活.不幸的是,使用FireBug我没有看到类似的东西......

Answer 1

默认情况下,图像的下边缘与线框的基线(灰线)对齐.基线下方的空间(也称为"下行空间")是造成问题的原因.有关详细信息,请参阅Eric Meyer 撰写的这篇文章.

要解决此问题,请添加以下规则:

.scream .author img {
    display: block;
}

或者这一个:

.scream .author img {
    vertical-align: bottom;
}