未在Firefox或IE中加载CSS。在Chrome中工作

我创建了一个简单的教会目录，在该目录中我编辑了CSS以将其中一个默认地图标记更改为我自己的地图标记之一。我遇到的问题是地图标记在Chrome和Safari上正确显示，但不是Firefox IE或Edge。未在Firefox或IE中加载CSS。在Chrome中工作

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); 
}

来源

2016-08-23 abbanoob

您需要发布的所有代码，这里显示的问题，而不是第三名ty网站明天可能会改变或消失。 – Rob

您的网站重定向到WordPress登录。 –

步骤：1）将代码复制并粘贴到文本框中2）突出显示所有代码3）同时按Ctrl和K.沃拉你已经添加了代码到你的文章。请编辑您的帖子，并且这样做，谢谢！ – Joshua

问题是与定期元素使用content财产。使用替代background属性，这将有更好的跨浏览器支持。

更改如下：

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

进入这个：

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

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

来源

2016-08-24 00:02:33 Sampson

谢谢桑普森。不过，我需要从默认的地图标记覆盖CSS。所以我只会编辑文本并将内容更改为背景？ – abbanoob

你应该仍然可以覆盖样式。 – Sampson

所以它会是这样的...对吗？ ion-information-circled {background：url（http://copticchurch-directory.org/wp-content/uploads/2016/08/Map-Marker1.svg）; } – abbanoob

未在Firefox或IE中加载CSS。在Chrome中工作

回答

相关问题