為什麼 Firefox 不使用 CSS `content: url()` 顯示圖片？-css教學-PHP中文網

為什麼 Firefox 不使用 CSS `content: url()` 顯示圖片？

Patricia Arquette

發布： 2024-12-11 08:03:15

原創

971 人瀏覽過

Why Doesn't Firefox Display Images Using CSS `content: url()`?

Firefox 不顯示使用內容URL 聲明的圖片

在CSS 樣式的上下文中， content 屬性用於在之前或之後添加內容一個元素。然而，當使用 content 屬性在 Firefox 中顯示圖像，而它在 Google Chrome 等其他瀏覽器中無縫運行時，會出現一個常見問題。

考慮以下用於將圖像添加到元素的 CSS 類別：

.googlePic {
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float: right;
    height: 19px;
}

登入後複製

當此類應用於元素時，圖像不會在 Firefox 中顯示。要解決此問題，必須將 content 屬性與 ::before 或 ::after 偽元素結合使用。透過將圖像聲明包裝在 ::before 偽元素中，Firefox 將正確顯示圖像。

.googlePic::before {
    content: url('../../img/googlePlusIcon.PNG');
}

登入後複製

需要注意的是，在 IE8 中，僅當 !DOCTYPE 為已指定。

以上是為什麼 Firefox 不使用 CSS `content: url()` 顯示圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！