单位计数器保存按钮点击后0值文本位置偏移问题排查

问题根源 #

这种偏移通常是内联元素的垂直对齐规则不一致或行高未固定导致的：

• 浏览器对仅含"0"的内联span，默认基线对齐逻辑会和多位数文本产生差异
• 未统一设置vertical-align时，不同内容的span会以自身文本基线对齐，导致位置偏移

修复方案 #

1. 统一CSS样式（核心修复）

给所有存储星期数值的span添加以下样式，强制对齐规则统一：

/* 假设你的星期span类名为.day-unit，可根据实际类名修改 */
.day-unit {
  vertical-align: middle; /* 强制所有span以中线对齐 */
  line-height: 1.4; /* 设置固定行高，避免内容变化时高度波动 */
  display: inline-block; /* 转为块级内联元素，更易控制布局 */
  min-width: 25px; /* 可选：固定最小宽度，让所有星期栏宽度一致 */
  text-align: center; /* 文本居中，视觉更整齐 */
}

2. 修正JavaScript赋值逻辑

确保数值为0时直接赋值字符串"0"，不要设置为空内容：

// 修正后逻辑：不管数值是否为0，直接赋值
const totalUnits = document.getElementById('total-units').textContent;
// 假设用data属性匹配对应星期的span，可根据实际选择器修改
const targetSpan = document.querySelector(`.day-unit[data-day="${currentDay}"]`); 
targetSpan.textContent = totalUnits.trim(); // 去除多余空格，确保干净赋值

原理说明 #

• vertical-align: middle：让所有span元素以父元素的中线为对齐基准，彻底消除基线对齐的差异
• 固定line-height：保证每个span的高度一致，不会因为内容是"0"或多位数导致高度变化
• 避免空内容：空span的渲染高度会远低于有文本的span，直接赋值"0"能维持统一的盒模型尺寸

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