我正在开发一个 Intranet 应用程序，该应用程序多年来一直在所有主要浏览器中使用 quirks 模式。目标是让它在标准模式下工作而不破坏任何东西，这样我们就可以使用一些 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>
最佳答案
将 vertical-align: top 添加到 iframe。 vertical-align 的初始值为baseline。
iframe 是一个内联元素。有问题的差距是为 descenders 保留的空间在字母中。
更多信息在这里:https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
关于html - 当标准模式下单元格内有 iframe 时，Firefox 和 Chrome 会向表格单元格添加 2px 底部填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9435635/