Text-indent兼容问题：Safari中按钮文本不显示，Chrome/Firefox正常

嘿，我完全懂你折腾3小时的崩溃感——Safari的CSS兼容坑确实容易让人头大😅。结合你描述的情况（Chrome/Firefox正常，Safari中按钮文本消失），大概率是text-indent的渲染机制在Safari里和其他浏览器不一样，下面给你几个针对性的解决方案：

常见问题原因&修复方案 #

1. 避免用超大负值的text-indent隐藏文本 #

如果你的按钮是用text-indent: -9999px这类写法来隐藏默认文本（只显示背景图），Safari会因为“文本完全在可视区域外”直接不渲染它，而Chrome/Firefox会保留渲染逻辑。这时候换一种更兼容的隐藏方式：

替换方案（推荐）：

.btn-group .button {
  position: relative;
  overflow: hidden;
  /* 保留你原来的其他样式：background、width、height等 */
}
/* 把按钮文本放在span标签里 */
.btn-group .button span {
  position: absolute;
  left: -9999px;
  top: 0;
}

2. 如果是要调整文本位置，改用padding替代text-indent #

如果你的text-indent是用来调整文本和按钮边缘的距离，Safari对块级元素的text-indent计算可能和其他浏览器有差异。换成padding-left（或padding-right）更稳定：

示例修改：

.btn-group .button {
  /* 原来的 text-indent: 20px; 替换成下面的 */
  padding-left: 20px;
  text-align: left; /* 确保文本对齐方向正确 */
  /* 保留其他样式 */
}

3. 检查继承和overflow属性 #

• 确认按钮有没有继承父元素的text-indent值（比如父容器设置了text-indent: 2em，按钮继承后可能导致文本偏移到容器外）
• 如果按钮设置了overflow: hidden，再加上text-indent负值，Safari会更严格地截断文本，这时候可以改成overflow: visible（如果不影响布局的话）

快速测试步骤 #

1. 先临时注释掉text-indent属性，看看Safari里文本能不能显示——如果能，那问题肯定出在这个属性上
2. 按照上面的方案替换写法，逐步测试哪种适合你的场景

新手遇到浏览器兼容问题真的很磨人，慢慢来，先试试这些方法，应该能解决你的问题～

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