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

时间:2016-10-21 19:56:58

标签: html css

小提琴: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>

如何修复&#34; +&#34;在Chrome中显示,但在IE中不显示。

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

2 个答案:

答案 0 :(得分:2)

语法不正确。

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

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

Reference @ w3schools

答案 1 :(得分: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;      
}