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

小提琴：

HTML:

如何修复Chrome中显示的+而不是IE中显示的+呢

---

解释了如何使用背景而不是内容，但在我的案例中不起作用。

这是不正确的语法

content属性适用于pseudeo元素：：after、：：before、：after和：before

如果希望它在所有浏览器中显示，则必须在.css文件中或内部创建一个伪元素。或者，您可以在元素中放置一个标记

---

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

我已经更新了

但情况是这样的：

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

---

Chrome中没有显示可能的背景副本。我尝试过这种方法，如果你已经做过这项研究的话，我可能会提到它。@Si8你在一个常规元素上使用内容，而不是伪元素。链接为可能重复的答案解释说，@Si8这是因为1它没有高度2您需要将背景大小设置为contain@Si8很高兴能帮助您，如果它确实解决了您的问题，请确保将其标记为答案，以供将来参考；。对需要再等一分钟。。。不知道为什么我会被否决：/

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