仅Safari/Mac浏览器中Text-decoration line-through出现错位问题

直接给.price--old下的<s>标签添加CSS，强制对齐规则，修正Safari的偏差：

.price--old s {
  text-decoration: line-through;
  vertical-align: baseline; /* 强制和文本基线对齐 */
}

这个方法改动小，不会破坏原有布局，能快速对齐删除线。

方法二：用伪元素自定义删除线（更可控） #

如果方法一效果不理想，可以用伪元素模拟删除线，彻底摆脱浏览器默认样式的影响：

.price--old {
  position: relative;
  display: inline-block;
}
.price--old::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor; /* 和文本颜色保持一致 */
  transform: translateY(-50%); /* 确保删除线垂直居中 */
}

使用这个方法时，你可以去掉HTML里的<s>标签，直接用.price--old包裹价格文本即可，删除线的位置和样式完全由你掌控。

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