Chrome中图片高度为小数时表格单元格高度不一致的原因及解决方法

我之前处理过类似的浏览器渲染差异问题，咱们来拆解一下这个现象：

原因分析 #

Chrome和Firefox/IE在处理小数像素高度的元素与表格单元格布局时，采用了不同的渲染策略：

• Chrome对元素的实际渲染像素会做严格的整数取整（毕竟屏幕是物理整数像素），当td内的图片高度是小数（比如76.54px）时，Chrome会把图片的渲染高度取整为76px；但表格行高的计算逻辑中，其他没有图片的td可能继承了行的默认计算高度（或者基于其他内容的整数高度），这就导致了含图片的td高度比其他列少。
• 而Firefox和IE会对整个表格行的高度做统一的取整处理，不会单独对每个单元格内的元素高度取整后再计算单元格高度，所以所有td的高度能保持一致。

可行的解决方案 #

1. 给图片设置整数高度（最直接） #

从根源上避免小数像素问题，把图片的CSS高度或HTML属性高度改成整数：

td img {
  height: 77px; /* 将76.54px调整为最接近的整数 */
  width: auto; /* 保持宽高比 */
}

2. 强制单元格统一高度 #

通过CSS给所有td设置固定的整数高度，忽略内容的小数高度差异：

td {
  height: 77px; /* 根据实际需求调整 */
  vertical-align: middle; /* 可选，让内容垂直居中 */
}

3. 使用line-height统一行高 #

如果需要内容垂直居中，给td设置整数line-height，配合图片的垂直对齐：

td {
  line-height: 77px; /* 整数行高 */
  vertical-align: middle;
}
td img {
  vertical-align: middle; /* 让图片对齐行高基线 */
}

4. 固定表格布局 #

开启表格的固定布局模式，让浏览器按照预设规则渲染，减少自动计算带来的差异：

table {
  table-layout: fixed;
  width: 100%; /* 配合固定布局需要设置宽度 */
}
td {
  height: 77px;
}

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