Почему появляется иконка в некоторых браузерах, а другие не

Question

Fiddle: 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, но это не работает в моем случае.

Answer 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;  
} 

Answer 2

Неправильный синтаксис.

Свойство content применимо к pseudeo-элементов ::after, ::before, :after и :before.

Если вы хотите, чтобы он отображался во всех браузерах, вы должны создать псевдоэлемент в <style></style> или внутри .css-файла. Кроме того, вы можете поместить в свой блок <img/> элемент <i></i>.

---

Reference @ w3schools