Safari本地打开子页面无法加载上级目录CSS文件问题求助

问题根源 #

这是Safari在**本地文件协议（file://）**下的资源加载bug，和它对相对路径的解析逻辑有关：

• 直接打开subpage.html时，Safari没有正确解析../main.css的上级路径，导致CSS加载失败；
• 从index.html跳转至子页面时，浏览器保留了父页面的上下文，路径解析逻辑正常，所以样式能加载；
• 开启「CSS content visibility」后，Safari的资源加载流程被调整，绕过了这个特定的本地协议bug。

普通访客是否会遇到？ #

不会。这个bug仅出现在本地用file://协议打开文件的场景，当网站上线后使用HTTP/HTTPS协议时，Safari对相对路径的解析完全遵循标准，和Chrome表现一致，不会出现样式丢失问题。

本地调试临时解决方案 #

• 用本地服务器运行网站，模拟线上HTTP环境，彻底避免file://协议的解析问题：
  • Python：执行python -m http.server（Python 3）或python -m SimpleHTTPServer（Python 2），然后在浏览器访问http://localhost:8000
  • Node.js：安装http-server后执行http-server，访问对应本地地址
• 若仅临时调试，可保持开启「CSS content visibility」功能，但上线无需做任何额外配置。

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