css - 在 IE 或 Edge 中不显示 css 类中带有图像的 Div

Question

我有一个像这样的 css 类的 div:

 .sideArrowImage {
    content:url('https://p41tarste2uscdn.blob.core.windows.net/cfc4678d-f1bd-42d0-93ba-b576ca0efc63/c114d41e-2e9d-4750-bcc6-84c587b7528c/media/images/non-resp%20arrow.png');
      }

  <div class="sideArrowImage"></div>

图像出现在 Opera/Firefox/Chrome 中。它不会出现在 IE11 或 Edge 中。如何让图片在 IE11 或 Edge 中显示？

谢谢

Answer 1

content property仅在 :before 有效和 :after伪元素，你应该使用 <img> tag或 css background property .

---

.sideArrowImage {
  background:url('https://p41tarste2uscdn.blob.core.windows.net/cfc4678d-f1bd-42d0-93ba-b576ca0efc63/c114d41e-2e9d-4750-bcc6-84c587b7528c/media/images/non-resp%20arrow.png') no-repeat; 
  width:23px;
  height:23px;
 }

Img tag:<br>
<img src="https://p41tarste2uscdn.blob.core.windows.net/cfc4678d-f1bd-42d0-93ba-b576ca0efc63/c114d41e-2e9d-4750-bcc6-84c587b7528c/media/images/non-resp%20arrow.png" alt="=>" height="23" width="23">
<br><br>
Background CSS property:<br>
<div class="sideArrowImage"></div>