為什麼在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中文網其他相關文章！