CSS 内容：url() 无法与 Firefox 和 Edge 一起正常工作（即使使用 ::before 或 ::after）

Question

我正在覆盖 Kendo 调度程序在事件上放置的循环符号（一个“！”，周围有一个圆圈）是带有以下 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*/
}

Answer 2

另一种方法（假设您可以控制 HTML）：在输入后添加一个空白，然后使用 input+ span:after

在 CSS 中定位它

.field_with_errors {
  display: inline;
  color: red;
}
.field_with_errors input+span:after {
  content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
  <input type="text" /><span></span> 
</div>

我在 AngularJS 中使用这种方法，因为它会自动将 .ng-invalid 类添加到表单元素和表单中，但不会添加到 .

CSS 内容：url() 无法与 Firefox 和 Edge 一起正常工作（即使使用 ::before 或 ::after）

CSS content: url() not working correctly with Firefox and Edge (even with ::before or ::after)

javascript

css

kendo-scheduler