html - CSS 未在 Firefox 或 IE 中加载。适用于 Chrome

Question

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