Question

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>

如何修复＆＃34; +＆＃34;在Chrome中显示，但在IE中不显示。

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

Answer 1

语法不正确。

content属性适用于pseudeo-elements ::after，::before，:after和:before。

如果要在所有浏览器中显示它，则必须在<style></style>或.css文件中创建一个伪元素。或者，您可以在<img/>元素中添加<i></i>标记。

Reference @ w3schools

Answer 2

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

我已更新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;      
}

为什么某些浏览器中会显示图标，而其他浏览器则不显示

2 个答案: