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，背景图片无法显示。开发者工具的网络面板可以验证这一点。
Otter.ai
一个自动的会议记录和笔记工具，会议内容生成和实时转录
91 查看详情
此外，Safari的自定义样式表（user style sheet）机制可能对本地文件路径的处理有所限制。 为进一步验证，建议尝试修改CSS代码，例如：
body { background: #ffbebe url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;}
这将设置一个默认背景色，即使图片加载失败，也能观察到样式是否应用。
总之，在自定义样式表中，避免使用file协议和本地绝对路径引用资源，特别是部署到服务器的项目。 正确的做法是使用相对路径或完整的网络路径引用资源。
以上就是为什么在Safari中自定义样式表能在本地网页生效，但在百度页面上却无法生效？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1112461.html
微信扫一扫 
支付宝扫一扫 
