Safari浏览器中Codepen项目链接文本显示异常问题求助

1. 优先补全默认状态样式 #

你当前的CSS只定义了链接的hover、visited、active状态，但缺少未访问状态的基础颜色设置。不同浏览器对链接的默认样式存在差异：Chrome默认未访问链接是蓝色，但Safari可能因缓存的访问记录优先触发visited状态，或者其默认样式被隐式覆盖，导致文本显示为白色（和背景色重合）。

先给链接添加默认状态的颜色：

.project-link {
  color: #000; /* 替换为你需要的可见颜色，比如和Chrome一致的蓝色#00e */
}

2. 不需要浏览器前缀 #

:link、:visited、:hover、:active这类伪类是标准CSS特性，所有现代浏览器（包括Safari）都原生支持，完全不需要添加浏览器前缀。

3. CSS Reset/Normalize的作用 #

• CSS Reset：会重置所有元素的默认样式（包括链接的颜色、下划线等），能彻底抹平不同浏览器的基础样式差异，避免因默认样式不一致引发的问题。
• Normalize.css：保留有用的默认样式，同时统一跨浏览器的不一致行为（比如链接visited状态的样式处理），也能有效解决这类兼容性问题。

两者都能帮你减少跨浏览器样式冲突，但前提是你要正确定义自己的各状态样式（尤其是默认状态）。

4. 排查Safari状态误触发 #

如果补全样式后问题仍存在，可以做以下检查：

• 测试设备是否真的访问过该链接：Safari会缓存visited状态，可在隐私设置中清除历史记录后重新测试。
• 用Safari开发者工具查看计算样式：右键点击链接选择「检查元素」，查看「计算样式」面板里的color属性，确认实际生效的样式来源，排查是否有父元素样式或继承规则影响了链接颜色。

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