带边框/轮廓/边距/填充的怪异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的this article。

要解决此问题，请添加以下规则：

.scream .author img {
    display: block;
}

或者这个：

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

Answer 2

如果您稍微使用DOM检查器，您会发现.author的高度为52px左右。额外的4px似乎来自line-height。将line-height设置为0：

.scream .author {
    float: left;
    line-height: 0;
}

修复布局：http://jsfiddle.net/ambiguous/8KzdD/

或者，您也可以将图像浮动到左侧：

.scream .author {
    float: left;
}
.scream .author img {
    float: left;
}

这将从本地流中删除图片并使line-height无关紧要：http://jsfiddle.net/ambiguous/8KzdD/1/

另一种选择是放弃清算<div>并在外overflow:hidden上使用<div>：

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

这将使<div class="author">的高度保持在52px，但效果在视觉上不会明显：http://jsfiddle.net/ambiguous/8KzdD/2/