为什么这个元素会导致相同大小的容器溢出？答案

【问题标题】：Why does this element cause an overflow in a container with the same size?为什么这个元素会导致相同大小的容器溢出？
【发布时间】：2015-11-20 20:03:51
【问题描述】：

我正在尝试创建一个仅在元素不适合默认区域时显示滚动条的 div。

<div style="overflow-y: auto; height: 36px;">
  <img src="." width="36" height="36" />
</div>

不幸的是，在 div 的底部有一些填充，所以滚动条总是显示，即使理论上 img 和 div 应该是相同的高度。我能够在 Firefox 和 Chrome 中重现，所以它看起来不像是浏览器错误。

为什么会这样？

【问题讨论】：

标签： html css

【解决方案1】：

尝试将font-size: 0;添加到父div：

<div style="overflow-y: auto; height: 36px; font-size: 0;">
  <img src="." width="36" height="36" />
</div>

【讨论】：

天哪，这工作得很好！这是什么神仙术？？说真的，你知道为什么会这样吗？ PS。刚刚检查过，line-height: 0; 也为我修复了它

【解决方案2】：

尝试去掉父 div 或页面中的填充。

<html>
  <body style="margin: 0; padding: 0;">
    <div style="overflow-y: auto; height: 36px; margin: 0; padding: 0;">
      <img src="." width="36" height="36" style="margin: 0; padding: 0;"/>
    </div>
  </body>
</html>

【讨论】：

这在我尝试时似乎不起作用。 jsfiddle.net/ucfkv5xp 我认为这是因为您的示例中缺少文档类型，但这不是我的项目的选择。

【解决方案3】：

你只需要在<img>上设置float

<div style="overflow-y: auto; height: 36px;">
  <img src="." width="36" height="36" style="float:left"/>
</div>

【讨论】：

我仍然在你的 sn-p 中看到溢出。
虽然这对我来说适用于 sn-p，但它并没有改变我的问题。在父级上将 font-size 设置为 0 修复了它！