Firefox 与 img 内容不兼容 url

Question

我正在尝试在 css 文件中设置 'img src'。我已经研究了可以使用的不同方法，但它还行不通。如果将 ::after 放在 css 中，则在 Chrome 中不起作用，但在 Firefox 中可以使用不同的样式。有点困惑，关于这个解决方案的任何想法： https://jsfiddle.net/er1txx0z/

  <label class="control-label"></label>      
  <button id="btn1" class="btn btn-warning shadow dcweb_search" disabled="true">
    <img class="dcweb_search_img" />
  </button>


    <style>
    .dcweb_search{
    height: 60px;
    width: 60px;
    position: relative;
    top:-17px
    }
    .dcweb_search_img{
    width:40px;
    content:url('https://api.icons8.com/download/c5c8b5ba35e008ea471e9a53c5fa74c03ef6e78c/iOS7/PNG/256/Very_Basic/search-256.png');
    }
    </style>

Answer 1

您可以在 button 元素上将图像设置为 background-image。无需为 img 标签烦恼。

.dcweb_search {
  height: 60px;
  width: 60px;
  position: relative;
  top: -17px;
  background-image: url('https://api.icons8.com/download/c5c8b5ba35e008ea471e9a53c5fa74c03ef6e78c/iOS7/PNG/256/Very_Basic/search-256.png');
  background-size: 40px 40px;
  background-position: center;
  background-repeat: no-repeat;
}

<label class="control-label"></label>
<br>
<button id="btn1" class="btn btn-warning shadow dcweb_search" disabled="true">
</button>

Firefox 与 img 内容不兼容 url

Firefox incompatibility with img content url

html

css

firefox

styles