[英]CSS not loading in Firefox or IE. Works in Chrome
I've created a simple church directory in which I edited the CSS to change one of the default Map Markers to one of my own. 我创建了一个简单的教会目录,在其中我编辑了CSS,将一个默认的Map Markers更改为我自己的一个。 The issue that I am having is that the Map marker is displayed correctly on Chrome and Safari but not Firefox IE or Edge. 我遇到的问题是地图标记在Chrome和Safari上正确显示,但没有在Firefox IE或Edge上显示。
copticchurch-directory.org copticchurch-directory.org
Code 码
/*
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);
}
The problem is with the use of the content
property on regular elements. 问题在于在常规元素上使用content
属性。 Use instead the background
property, which will have better cross-browser support. 请使用background
属性,它将具有更好的跨浏览器支持。
Change the following: 更改以下内容:
.ion-information-circled {
content: url(...);
}
Into this: 进入:
.map-marker .ion-information-circled::before {
content: "";
background: url(...)
}
https://jsfiddle.net/eyvetdz4/2/ https://jsfiddle.net/eyvetdz4/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.