如何让text-decoration: underline样式在不同浏览器中显示效果一致？

解决方案 #

你可以根据兼容需求选择以下任意一种方案实现跨浏览器统一的虚线下划线效果：

• 方案一：background-image模拟实现（全浏览器兼容）
  该方案完全规避不同浏览器对原生text-decoration: dashed的渲染逻辑差异，所有浏览器效果100%一致，代码示例如下：

a {
  /* 清除原生下划线 */
  text-decoration: none;
  /* 用渐变模拟虚线 */
  background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
  background-size: 4px 1px; /* 第一个值控制虚线密度：值越大虚线间距越大，第二个值控制下划线厚度 */
  background-repeat: repeat-x;
  background-position: 0 100%; /* 控制下划线垂直位置，第二个值越大下划线越靠下 */
  padding-bottom: 1px; /* 可配合调整下划线和文字的间距 */
}

你可以根据设计需求调整background-size、background-position的参数，自定义虚线的厚度、间距、位置。

• 方案二：明确声明text-decoration相关全属性（兼容近3年发布的浏览器）
  如果不需要兼容过老的浏览器版本，你可以把复合属性拆分后明确赋值，减少不同浏览器的默认值差异：

a {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px; /* 明确下划线厚度 */
  text-underline-offset: 2px; /* 明确下划线和文字的间距 */
}

该方案在Chrome≥87、Firefox≥70、Safari≥12.1版本中效果完全统一，更低版本浏览器仍存在渲染差异。

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