为什么在Safari中自定义样式表能在本地网页生效，但在百度页面上却无法生效？

Safari自定义样式表：本地生效，远程失效？

本文分析Safari浏览器自定义样式表的一个常见问题：为何在本地网页生效的自定义CSS，在访问例如百度等远程网站时却失效？

一个前端开发者在Safari偏好设置中使用自定义样式表，尝试以下CSS代码：

body {
    background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;
}

测试结果显示：本地网页(file协议)下样式生效，而百度网页(http协议)下样式失效。

问题的关键在于协议差异和资源路径。本地网页使用file协议，可以直接访问本地文件系统；而百度网页使用http协议，访问的是远程服务器。自定义样式表中url("/Users/luxury/Desktop/wallhaven-o5762l.png")尝试引用本地图片，这在远程网页环境下显然无法访问。

浏览器会根据当前网页的协议解析URL。在百度页面，浏览器会尝试访问http://www.baidu.com/Users/luxury/Desktop/wallhaven-o5762l.png，此路径不存在，导致图片加载失败，从而样式失效。虽然CSS规则本身可能被应用，但由于图片资源404，背景图片无法显示。开发者工具的网络面板可以验证这一点。

此外，Safari的自定义样式表（user style sheet）机制可能对本地文件路径的处理有所限制。 为进一步验证，建议尝试修改CSS代码，例如：

body {
    background: #ffbebe url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;
}

这将设置一个默认背景色，即使图片加载失败，也能观察到样式是否应用。

总之，在自定义样式表中，避免使用file协议和本地绝对路径引用资源，特别是部署到服务器的项目。 正确的做法是使用相对路径或完整的网络路径引用资源。

以上是为什么在Safari中自定义样式表能在本地网页生效，但在百度页面上却无法生效？的详细内容。更多信息请关注PHP中文网其他相关文章！