如何让包含input标签的表格行与其他行高度一致？

问题描述 #

以下HTML页面中，表格的row1和row3行高度为20.5px，而包含<input>的row2行高度为23.5px。尝试border-collapse: collapse及调整边框、内边距后，仅去掉input边框能将差距缩小至0.5px，但仍未实现行高一致，且不想通过固定行高解决该问题。

<html>
<head>
<script>
window.onload = function() {
    let r1 = document.getElementById('row1') ;
    let r2 = document.getElementById('row2') ;
    let r3 = document.getElementById('row3') ;
    let r1Rect = r1.getBoundingClientRect() ;
    let r2Rect = r2.getBoundingClientRect() ;
    let r3Rect = r3.getBoundingClientRect() ;
    let stopHere = null.hello() ;
}
</script>
</head>
<body>
<table>
<tbody>
<tr id='row1'><td>this is a row</td></tr>
<tr id='row2'><td><input type=text>this is an input</td></tr>
<tr id='row3'><td>this is a row</td></tr>
</tbody>
</table>
</body>
</html>

解决方案 #

问题根源是浏览器对<input>这类表单替换元素有默认的用户代理样式（如内边距、行高、垂直对齐方式），导致其所在行的行盒高度被撑开。通过统一<input>与文本的排版属性即可解决：

/* 统一单元格的基础排版 */
td {
  line-height: normal;
}

/* 重置input默认样式，使其与文本排版一致 */
input {
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: baseline;
  line-height: inherit;
}

原理说明 #

• vertical-align: baseline：让input与文本基线对齐，避免默认对齐方式带来的行盒高度额外增加。
• line-height: inherit：继承单元格的行高，确保input的行高与文本完全一致。
• 重置padding、margin、border：清除input默认样式带来的额外尺寸。

设置以上样式后，含input的行高度会与普通行完全一致，且无需固定行高。

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