Chrome可加载但Safari无法显示的Logo问题排查求助

问题原因 #

• 第三方链接兼容性差异：你使用的Dropbox共享链接，即便添加了dl=1参数，Safari对这类第三方间接资源链接的处理逻辑与Chrome不同，可能返回跳转页面而非直接图片资源，导致Safari无法识别加载。
• MIME类型校验严格：Safari对资源的MIME类型校验比Chrome更严苛，若Dropbox服务器返回的响应头未正确设置image/jpeg类型，浏览器会拒绝加载图片。
• 跨域策略限制：Safari的跨域资源共享（CORS）规则更严格，若Dropbox未允许当前页面域名的跨域请求，会直接阻止图片加载。

解决建议 #

• 使用本地图片（推荐）：将图片下载到项目目录，改用相对路径引用，彻底规避第三方链接的兼容性问题。修改HTML中的图片标签：

  <img id="palindrome-logo" src="./Palindrome-ganged-Rainbow.jpeg" alt="palindrome logo">
  

• 更换静态资源托管服务：选择GitHub Pages、Imgur等专门的静态资源托管平台，获取直接的图片URL替换现有链接。
• 修正Dropbox链接参数：重新生成Dropbox的直接下载链接，尝试将?dl=1替换为?raw=1，确保链接指向图片文件本身而非共享页面。
• 验证图片完整性：将图片下载到本地确认未损坏，也可转换为PNG格式后重新上传，提升Safari的识别兼容性。

代码小修正提示 #

你的CSS中#check-btn样式缺少分号，可能导致样式异常，补充后如下：

#check-btn {
  height: 25px;
  background: #F9BD21; /* 添加缺失的分号 */
  font-size: 20px;
}

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