Safari中background-color不生效问题求助（附CSS代码）

这个问题的核心原因很明确——你在CSS里错误地使用了rgb()函数传递四个参数（红、绿、蓝、透明度），而根据CSS标准，rgb()仅接受三个颜色通道参数，透明度需要用rgba()函数来实现。

Chrome和Firefox的渲染引擎做了容错处理，会自动把这种不符合规范的写法识别为rgba()，但Safari的WebKit引擎对语法规范的要求更严格，所以直接忽略了这个无效的rgb()声明，导致背景色不显示。

修正后的代码： #

main { 
  background-color: rgba(254, 236, 89, 0.85); 
  width: 960px; 
  padding-top: 130px; 
  padding-bottom: 87px; 
}

额外注意事项： #

• 如果需要兼容非常老旧的Safari版本（比如iOS 7及以前或Mac OS X 10.9及以前），可以同时添加带浏览器前缀的声明作为 fallback（不过现在大部分场景已经不需要了）：

  main { 
    background-color: rgba(254, 236, 89, 0.85);
    background-color: -webkit-rgba(254, 236, 89, 0.85); /* 旧版Safari前缀 */
    width: 960px; 
    padding-top: 130px; 
    padding-bottom: 87px; 
  }
  

• 始终遵循CSS语法规范可以避免这类跨浏览器兼容性问题，建议使用CSS校验工具检查代码语法，提前规避类似问题。

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