当标准模式下的单元格内有iframe时，Firefox和Chrome会向表格单元格添加2px底部填充

Question

我正在研究一个内部网应用程序，该应用程序多年来一直致力于所有主流浏览器中的怪异模式。 目标是让它在标准模式下工作而不会破坏任何东西，以便我们可以使用一些jQuery包。 无论如何我的问题是在标准模式下，当单元格内有iframe时，Firefox和Chrome会向表格单元格添加2px底部填充。 这不会发生在IE中。

当我切换到quirks模式时，填充在Firefox和Chrome中消失。
当我添加div而不是iframe时，填充消失了。
将表cellpadding和cellspacing设置为零无济于事。
iframe src页面也处于标准模式。

这是一个测试用例，供您查看：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Test</title></head>
<body style="background:#FFF;">
<table cellpadding="0" cellspacing="0" border="0">
      <tr>
            <td id='browser_td' style='width:1000px; height:500px; margin:0px; padding:0px; background:#000; border-bottom:0px;'>
                  <iframe id='browser_iframe' name='browser_iframe' src="http://houston.craigslist.org/" width='1000' height='500' frameborder="0" hspace="0" vspace="0"></iframe>
            </td>
      </tr>
</table>
</body>
</html>

Answer 1

将vertical-align: top添加到iframe 。 vertical-align的初始值是baseline 。

iframe是内联元素。 有问题的差距是为字母中的下降者保留的空间。

更多信息请访问： https ： //developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Answer 2

我在<table>的底部<td>中出现了这个问题。 使用Firefox，图像下方还显示了2px 。 （IE还可以）

无论如何，我登陆了这个有趣的页面:(由thirtydot发布） https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

图像位于文本基线上（显然），我将此标记添加到图像中。 一切都很好。 谢谢！

style="display: block;"

当标准模式下的单元格内有iframe时，Firefox和Chrome会向表格单元格添加2px底部填充

问题描述

2 个解决方案

解决方案1
8 已采纳 2012-02-24 18:34:25

解决方案2
0 2012-06-09 13:28:24

当标准模式下的单元格内有iframe时，Firefox和Chrome会向表格单元格添加2px底部填充

问题描述

2 个解决方案

解决方案1 8 已采纳 2012-02-24 18:34:25

解决方案2 0 2012-06-09 13:28:24

解决方案1
8 已采纳 2012-02-24 18:34:25

解决方案2
0 2012-06-09 13:28:24