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 回答