CSS没有在Firefox或IE中加载。适用于Chrome

Question

我已经创建了一个简单的教会目录，我在其中编辑了CSS以将其中一个默认的地图标记更改为我自己的一个。我遇到的问题是地图标记在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/