Safari浏览器中background-color属性失效问题求助

这个问题我之前做项目时也踩过坑！核心原因是Safari对8位十六进制颜色值（#RRGGBBAA格式）的支持存在兼容性问题——尤其是版本15.4之前的Safari，完全不识别这种带透明度的8位十六进制写法，会把它判定为无效的CSS值，最终 fallback 到默认的灰色背景，而Chrome和Firefox早在较新版本就已经支持了这种格式。

你用到的#11a004e0就是典型的8位十六进制颜色：前6位11a004是RGB值，最后两位e0是透明度通道（Alpha）。但旧版Safari不买账，直接忽略这个属性，导致背景变成灰色。

修复方案： #

推荐用兼容性更好的rgba()格式来替代，它所有现代浏览器（包括旧版Safari）都支持：

1. 转换颜色值：把#11a004e0转换成RGBA格式：

   • RGB部分：#11 → 17，a0 → 160，04 → 4
   • Alpha部分：e0是十六进制的224，除以255得到约0.87（精确值是0.870588）

2. 修改你的CSS代码：

.boton_nav { 
  border-radius: 4px; 
  background-color: rgba(17, 160, 4, 0.87); /* 替换原来的#11a004e0 */
  border: none; 
  color: #FFFFFF; 
  text-align: center; 
  font-size: 15px; 
  padding: 10px; 
  width: 220px; 
  margin-left: 2em; 
  animation-name: boton_nav; 
  animation-duration: 4s; 
  animation-timing-function: ease-in; 
  animation-iteration-count: infinite; 
  animation-delay: 3s; 
}

额外说明： #

如果你需要同时兼容极旧版本的浏览器，也可以采用“降级写法”——先写不带透明度的十六进制颜色，再写rgba：

background-color: #11a004; /* 旧浏览器 fallback */
background-color: rgba(17, 160, 4, 0.87); /* 现代浏览器覆盖 */

不过现在大多数用户的Safari版本都已经更新到支持8位十六进制了，但用rgba是最稳妥的跨浏览器方案，不会再出现背景变灰的问题。

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