Question

我有一个绝对定位的<div>，其设置的高度和宽度。它包含一个<img>标记，其高度和宽度完全相同。我已经删除了所有填充，边距和边框。我希望<img>能够贴合<div>，但我会得到一个垂直滚动条，让我上下移动约4px。

这是我的HTML：

<div id="maybe-scroll">
  <img src="..." width="100" height="100" border="0" padding="0" margin="0">
</div>

和我的CSS：

img, #maybe-scroll {
  padding: 0;
  margin: 0;
  border: 0;
}
#maybe-scroll {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  overflow: auto;
  border: 1px solid black;
}

http://jsbin.com/yimixu/3/edit?html,output

4px差异显示在Chrome的开发工具中：

> $('#maybe-scroll').clientHeight
100
> $('#maybe-scroll').scrollHeight
104

Firefox为两个值报告100但仍显示垂直滚动条。

导致此垂直滚动的原因是什么，我该如何消除它？我不想只设置overflow: hidden，因为在我的实际应用程序中，同一视图中的其他元素可能足够高以保证滚动。

Answer 1

img元素是内联元素。默认情况下，内联元素的vertical-align为baseline。即使那里没有文字，图像的底部仍然与任何字母的基线所在的位置对齐。在基线下方需要一些空间以允许带有下行（j，y等）的字母。下降器的空间是占用额外的4个像素。如果你在div中添加一些文字，并加宽div以便为字母和图像留出空间，这就变得非常清楚了。

有几种方法可以解决它。您可以在图片上设置vertical-align: bottom。这将使图像的底部与任何字母下降部分的底部对齐。或者，您可以将图像设置为display: block，这样您就不必担心垂直对齐。只要图像是div中唯一的东西，后者就可以了，但如果div中有其他元素，可能会导致其他问题。

为什么包含相同高度的img标签的div具有垂直滚动条？

1 个答案: