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事情，但這並沒有真正起作用。

在::之前替換！ 帶有圓圈箭頭，但圖標很大，並且設置寬度和高度以及字體大小等都無濟於事，無法更改圖標的大小。

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類添加到表單元素和表單中，而不是添加到中。