我正在研究一个内部网应用程序,该应用程序多年来一直致力于所有主流浏览器中的怪异模式.目标是让它在标准模式下工作而不会破坏任何东西,以便我们可以使用一些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的初始值是基线.
iframe是内联元素.有问题的差距是以字母为descenders保留的空间.
更多信息：https://developer.mozilla.org/en/Images,_and_Mysterious_Gaps
