Chrome与Firefox中小高度自定义下划线渲染不一致问题求助

问题原因 #

这不是浏览器Bug，本质是亚像素渲染偏差：

• 你用clamp()生成的响应式font-size会输出带小数的非整数值，导致文本容器（<a>/<li>）的高度变成亚像素级别的数值。
• 伪元素设置了固定height:3px，浏览器在处理亚像素对齐时会自动做取整或抗锯齿处理，最终造成不同元素的下划线视觉高度不一致，屏幕越小、font-size的小数部分越明显，问题越突出。

解决办法 #

1. 触发GPU渲染优化 #

给伪元素添加transform: translateZ(0)，强制GPU参与渲染，提升亚像素场景下的渲染精度：

.underline::after{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  bottom: 0;
  background: currentColor;
  border-radius: 999px;
  transform: translateZ(0); /* 新增 */
}

2. 使用相对单位替代固定像素 #

将下划线高度改为基于父元素字体大小的em单位，让高度随字体成比例缩放，避免固定像素在动态font-size下的亚像素冲突：

.underline::after{
  height: 0.08em; /* 替换原height:3px，可根据视觉效果调整数值 */
  /* 其他属性保留 */
}

3. 统一元素盒模型 #

给.underline设置display: inline-block，让元素高度更可控，消除行内元素的行高亚像素偏差：

.underline{
  text-decoration: none;
  display: inline-block; /* 新增 */
}

4. 改用原生CSS下划线属性（兼容性要求较高） #

如果目标浏览器支持CSS Text Decoration Level 4特性，直接用原生下划线替代伪元素，从根源避免亚像素问题：

.underline{
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
  text-decoration-radius: 999px; /* Chrome 117+支持，Firefox需开启实验性设置 */
}

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