HTML表格行<tr>精确高度设置异常：Chrome下显示44.44px而非44px

这个问题我之前帮同行排查过，Chrome里出现这种小数像素的行高，本质是字体渲染的亚像素计算和表格布局逻辑的锅，和Safari的渲染策略差异直接相关，具体拆解下：

为什么会多出0.44px？ #

• 表格行高的默认计算逻辑：表格行的高度并不是完全由你设置的height决定的，它会优先适配单元格内文本的line-height。哪怕你给<tr>设了44px，如果单元格里的文本line-height是浏览器默认值（比如16px字体对应1.2的行高，也就是19.2px），Chrome的布局引擎会计算一个能完整容纳文本的最小高度，这个过程会用到亚像素精度，就会出现44.44px这种奇怪的数值。
• Chrome的亚像素渲染机制：为了让文字显示更平滑，Chrome会用亚像素来布局文本元素；而Safari在处理表格行高时，会更严格地遵循你设置的像素值，尤其是当明确指定height后，不会轻易做亚像素调整。
• CSS reset的局限性：Eric Meyer的reset只是清除了浏览器的默认边距、padding和部分样式，但不会修改表格单元格默认的line-height继承规则，所以哪怕用了reset，只要文本的line-height没匹配行高，问题还是会出现。

解决办法 #

我试过几个有效的方案，按优先级排序：

1. 强制单元格line-height和行高一致
   给<td>或<th>设置和行高相同的line-height，同时对齐文本的垂直方向，这样Chrome就会严格按照你设置的高度渲染：

   table {
     tr {
       height: 44px;
     }
     td, th {
       line-height: 44px;
       vertical-align: middle; // 避免文本偏移导致的高度计算偏差
     }
   }
   

2. 开启固定表格布局
   给表格加上table-layout: fixed，这个属性会让浏览器优先使用你设置的宽度和高度，而不是根据内容自动调整，能减少亚像素计算的概率：

   table {
     table-layout: fixed;
     border-collapse: collapse; // 配合fixed布局效果更好
     width: 100%;
   }
   

3. 检查单元格内的嵌套元素
   如果单元格里还有<div>、<span>这类元素，要确保它们没有额外的margin、padding或者line-height，否则会撑开单元格高度，导致行高计算偏差。

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