请阅读以下代码作为示例(注意第 2 表行的“padding-bottom”):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>test</title></head>
<body>
<table style="height:300px;width:200px;background:#660000; float:left">
<tr><td style="height:20px">first row</td></tr>
<tr><td style="height:180px;padding-bottom:20px;">second row</td></tr>
<tr><td style="height:180px;">third row</td></tr>
</table>
<table style="height:300px;width:200px;background:#006600; float:left">
<tr><td style="height:20px">first row</td></tr>
<tr><td style="height:180px;">second row</td></tr>
<tr><td style="height:180px;">third row</td></tr>
</table>
</body>
</html>
我希望两个表的高度在 IE 和 FF 中应该相同。
然而，FF按预期呈现，但在IE中，第一个表格比第二个表格高20px。我应该怎么做才能让它像 FF 一样呈现？
我也很好奇是什么造成了差异。
最佳答案
IE 和 Firefox 对于框模型的工作方式有不同的规则。
考虑这一点的最佳方式是 IE 正在获取该单元格的设置高度，然后向其添加填充。这导致单元格高度为 200 像素。
而 Firefox 正在获取单元格内容的高度，然后对其应用填充。因为content height + padding没有超过cell的设置高度，所以cell没有展开。
您可能会尝试使用几个文档类型来查看是否可以让它们匹配，但我认为无论 DOCTYPE 是什么，IE 7 和 FF3 都无法匹配这种情况。此外，考虑是否可能使用重置样式表来匹配默认边距、字体大小等。
我接受了您的测试并做了以下操作以使其在两种浏览器中看起来相同:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style>
* {margin:0px; padding:0px;font-family: arial;font-size:14px;}
span { border: solid 1px black; margin-top:4px;display:block;}
.first { border:solid 1px blue; }
.second {border:solid 1px orange; }
.third {border:solid 1px yellow;}
.paddit {padding-bottom:10px;height:180px;}
</style>
</head>
<body>
<table style="width:200px;background:#660000; float:left">
<tr valign="top">
<td class="first" style="height:20px;"><span>first row</span></td>
</tr>
<tr valign="top">
<td class="second paddit"><span>second row. This is a long test to see what happens when a lot of content is placed in here; and I need more content.This is a long test to see what happens when a lot of content is placed in here; and I need more content.This is a long test to see what happens when a lot of content is placed in here; and I need more content.</span></td>
</tr>
<tr valign="top">
<td class="third" style="height:180px;"><span>third row</span></td>
</tr>
</table>
<table style="width:200px;background:#006600; float:left">
<tr valign="top">
<td class="first" style="height:20px;"><span>first row</span></td>
</tr>
<tr valign="top">
<td class="second" style="height:180px;"><span>second row</span></td>
</tr>
<tr valign="top">
<td class="third" style="height:180px;"><span>third row</span></td>
</tr>
</table>
</body>
</html>
关于html - IE 和 FF 之间表行填充底部的不同行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/615255/