如何使有无<!DOCTYPE html>时表格在Chrome中渲染高度一致（仅修改表格样式）

这个问题的核心原因很清晰：当页面带有<!DOCTYPE html>进入标准模式时，<td>作为表格单元格，内部<p>的上下margin会被计入单元格高度；而怪异模式下浏览器会直接忽略<p>的margin，单元格高度仅由<p>的内容本身决定。

针对你要求仅修改表格相关样式、不改动<p>元素的需求，在Chrome中可以用这个简洁的hack解决：

最终方案 #

给<td>元素添加line-height: 0;样式即可。如果需要让<p>的内容在单元格内垂直居中，再额外加上vertical-align: middle;。

基础版示例代码：

<!DOCTYPE html>
<html>
<body>
<table>
<tbody>
<tr>
<td style="border: solid 1px black; line-height: 0;">
<p>test</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>

垂直居中版示例代码：

<!DOCTYPE html>
<html>
<body>
<table>
<tbody>
<tr>
<td style="border: solid 1px black; line-height: 0; vertical-align: middle;">
<p>test</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>

原理说明 #

设置line-height: 0;后，<td>的行高被重置为0，浏览器在计算单元格高度时会自动忽略内部<p>的上下margin，只保留<p>内容本身的高度——这就和怪异模式下的渲染逻辑完全对齐了。而且这个修改只涉及表格单元格的样式，完全不需要触碰<p>元素，完美匹配你的场景。

内容的提问来源于stack exchange，提问作者Borislav Ivanov