为什么有的浏览器有图标有的没有答案

【问题标题】：Why is the icon shown in some browsers while other it is not为什么有的浏览器有图标有的没有
【发布时间】：2016-10-22 04:12:51
【问题描述】：

小提琴：https://jsfiddle.net/z1mdvkgq/

HTML：

<div class="test" style="overflow: hidden; width: 650px; height: 350px; background: #CCC; position: relative;">
  <div class='control' tabindex='1'>
    <div class='btn'></div>
    <i class="icon-search ion-search" style="
    content: url('https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png');
    width: 55px;
    position: absolute;
    left: 10%;
      top: 8%;
        outline: none;"></i>
  </div>
  <i class='icon-close ion-ios-close-empty'>CLOSE</i>
</div>

如何解决“+”在 Chrome 中显示但在 IE 中不显示的问题。

css url() not recognized in internet explorer 10 解释使用背景而不是 content，但这在我的情况下不起作用。

【问题讨论】：

css url() not recognized in internet explorer 10的可能重复
Chrome 中不显示背景。我已经尝试过这种方法
那么也许stackoverflow.com/questions/18202306/…，如果你已经做过这项研究提及。
@Si8 您在常规元素上使用content，而不是伪元素。作为潜在重复链接的答案解释了这一点。
@Si8 那是因为（1它没有高度（2你需要将background-size设置为contain

标签： html css

【解决方案1】：

您应该使用背景图像，而不是在非伪元素上使用内容。

我已经更新your fiddle

但它会是这样的：

.icon-search {
  background-image: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png);
  background-size: 100%;
  width: 55px;
  height: 55px; /* make sure to include height as well */
  position: absolute;
  left: 10%;
  top: 8%;
  outline: none;      
}

【讨论】：

@Si8 很高兴为您提供帮助，如果它确实解决了您的问题，请务必将其标记为答案以供将来参考；)。
是的...需要再等 1 分钟...不知道为什么我投了反对票：/

【解决方案2】：

语法不正确。

content 属性适用于伪元素 ::after、::before、:after 和 :before。

如果您希望它在所有浏览器中显示，您必须在 <style></style> 或 .css 文件中创建一个伪元素。或者，您可以在 <i></i> 元素中放置一个 <img/> 标签。

Reference @ w3schools

【讨论】：