javascript - CSS 内容:url() 无法在 Firefox 和 Edge 中正常工作(即使使用::before 或::after)

Question

我正在覆盖 Kendo Scheduler 放置在事件上的循环符号(一个“!”，周围有一个圆圈)是带有以下 css 的圆圈箭头:

.k-task>span.k-icon.k-i-warning {
        content: url('{!URLFOR($Asset.slds, "assets/icons/utility/sync.svg")}') !important;
        -webkit-filter: invert(100%);
        -moz-filter: invert(100%);
        -ms-filter: invert(100%);
        -o-filter: invert(100%);
    }
    .k-event>span.k-event-actions>span.k-icon.k-i-warning {
        content: url('{!URLFOR($Asset.slds, "assets/icons/utility/sync.svg")}') !important;
        margin-right: 10px;
        margin-top: -5px;
    }

这在 Chrome 中运行良好，但是，Firefox 和 Edge 仍然显示为带圆圈的“!”。我尝试在每一个之后执行::after 和::before 操作，但这并没有真正起作用。

做::before 替换了 !带有圆圈箭头，但图标很大，设置宽度和高度以及字体大小等...对改变图标的​​大小没有任何作用。

Chrome 只是简单地交换了它们的默认值!图标与我在内容中指定的图标相同，因此不需要其他大小更改。

我怎样才能让它在 Firefox 和 Edge 中正确显示？

Answer 1

这样试试

.k-task>span.k-icon.k-i-warning {
    width: 16px;
    height: 16px;
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -ms-filter: invert(100%);
    -o-filter: invert(100%);
}
.k-event>span.k-event-actions>span.k-icon.k-i-warning:after {        
    content: '';
    background-size: contain;
    background-position: center center;
    background-image: url('{!URLFOR($Asset.slds, "assets/icons/utility/sync.svg")}') !important;
    margin-right: 10px; /*I am not sure why you need these*/
    margin-top: -5px;/*I am not sure why you need these*/
}