1 
<div><iframe style="height: 100px"></iframe></div>
<div style="line-height: 0"><iframe style="height: 100px"></iframe></div>

http://jsfiddle.net/p6SD4/

如果您检查 DOM，您可以看到第一个 div 的高度为 108px，而第二个 div 的高度为 104px。带边框的 iframe 是 104px 那么为什么在设置 line-height 时会增加 4 个额外的像素？

在 Mac 版 Chrome 28.0.1500.71 上测试。

4

3 回答 3

3

因为 iframe 位于基线上。但是 div 必须足够高以包含支柱，支柱下降到基线以下，其高度由行高确定。

0 line-height = 0px 支柱高度 = 基线下方支柱的 0px。

使用iframe { display:block; }oriframe { vertical-align:top; }或iframe { vertical-align:bottom; } 来阻止这种情况发生。

(display:block 停止创建线框，因此没有支柱。垂直对齐：顶部和垂直对齐：底部将支柱从与 iframe 共享线框的基线中释放出来，因此支柱被放置得更高，这样它的任何部分都没有低于 iframe 的底部。请注意，如果 line-height 大于 iframe 高度，则 strut 将强制 line-box 高度，因此 div 高度仍然大于 iframe 高度，无论垂直对齐设置）

于 2013-07-18T12:53:46.763 回答
2

在 Chrome 28 中，这两个 div 似乎都是 109px 高。请记住，元素和所有内联元素的默认vertical-align值<iframe>是基线 - 将其更改为底部将使这两个元素像您预期的那样对齐。

http://jsfiddle.net/p6SD4/1/

于 2013-07-18T12:42:11.257 回答
0

这可能取决于您的浏览器。对于 Firefox 和 Chrome，两个 IFRAME 元素的高度均为 104px（100px + 4px 边框）。

你使用的是什么浏览器 ？您是否尝试过使用 border="0" ？

于 2013-07-18T12:45:45.790 回答