отображение изображений с URL содержимого в Firefox

возникала проблема, где некоторые браузеры, в частности, Firefox, не отображаются изображения при их ссылке с использованием собственности контента. Это можно увидеть в предоставленном классе CSS:

.googlePic {
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float: right;
    height: 19px;
}

, в то время как этот CSS работает, как и ожидалось в Google Chrome и Safari, он не может отображать какое-либо изображение в Firefox.

Решение:

Свойство контента может использоваться только с псевдоэлементами, такими как :: Перед и :: после. Чтобы решить проблему, нам нужно изменить наш класс CSS следующим образом:

.googlePic::before {
    content: url('../../img/googlePlusIcon.PNG');
}

объяснение:

свойство содержимого работает, вставив контент до или после элемента. Используя :: Ранее мы вставляем изображение перед элементом .googlepic, который позволяет Firefox правильно отображать его. Статья:

http://www.htmldog.com/reference/csssproperties/content/

Internet Explorer 8.