CSS沒有在Firefox或IE中加載。 適用於Chrome

Question

我創建了一個簡單的教會目錄，在其中我編輯了CSS，將一個默認的Map Markers更改為我自己的一個。 我遇到的問題是地圖標記在Chrome和Safari上正確顯示，但沒有在Firefox IE或Edge上顯示。

copticchurch-directory.org

碼

 /*
Theme Name:     Listify Child
Theme URI:      http://astoundify.com/themes/listify
Template:       listify
Version:        1.0
*/
.job_listing-rating-wrapper,
.map-marker-info .rating,
.single-comment-rating,
.star-rating-wrapper {
    display: none !important;
}


.type-job_listing.style-grid .job_listing-entry-footer {
    display: none;
}
.ion-information-circled
{
  content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/Map-Marker1.svg);
}

.ion-ios.information-circled
{
  content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/Map-Marker1.svg);
}

.ion.md.information-circled
{
  content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/Map-Marker1.svg);
}

Answer 1

問題在於在常規元素上使用content屬性。 請使用background屬性，它將具有更好的跨瀏覽器支持。

更改以下內容：

.ion-information-circled {
    content: url(...);
}

進入：

.map-marker .ion-information-circled::before {
    content: "";
    background: url(...)
}

https://jsfiddle.net/eyvetdz4/2/