Question

请阅读以下代码作为示例（注意第二表格行的“填充底部”）：

<!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一样渲染？

我也很好奇是什么产生了影响。

Answer 1

IE和Firefox对盒子模型的工作方式有不同的规定。

考虑到这一点的最佳方式是IE正在获取该单元格的设置高度，然后将填充添加到其中。这导致细胞高度为200px。

而Firefox正在获取单元格内容的高度，然后将填充应用于其中。由于内容高度+填充不超过单元格的设置高度，因此单元格不会展开。

您可以尝试使用几种doctypes来查看是否可以让它们匹配，但我不认为IE 7和FF3可以匹配这种情况，无论DOCTYPE如何。另外，请查看可能使用重置样式表来获取要匹配的默认边距，字体大小等。

我参加了测试并执行了以下操作，使其在两种浏览器中看起来都相同：

<!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>

IE和FF之间表行中填充底部的不同行为

1 个答案: