URL-адрес контента не отображает изображение в браузере Firefox

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

Это пример моего classа googlePic в моем файле css . Он отлично работает и отлично печатает на google chrome и safari . однако он не работает на firefox . Nth печатается. Пожалуйста помоги 🙂

Свойство content работает с ::before и ::after .

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

Прочтите это: http://www.htmldog.com/reference/cssproperties/content/

IE8 поддерживает только свойство content если указан параметр! DOCTYPE.

Я знаю, что это может быть поздний ответ, но я столкнулся с той же проблемой.

Я просмотрел его и, как-то, URL-адрес не является допустимым типом контента, и даже Chrome и Safari являются хорошими парнями и показывают это красиво.

Что сработало для меня, создавало пустой контент и использовал фон для показа изображения: он отлично работает в Chrome, Firefox, Safari и IE8 + 9

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

edit: забыли поставить: before после имени classа

вам нужно написать два classа css в стиле

 .googlePic { /*this for crome browser*/ content: url('../../img/googlePlusIcon.PNG'); margin-top: -6.5%; padding-right: 53px; float:right; height: 19px; } .googlePic: after { /*this for firefox browser*/ content: url('../../img/googlePlusIcon.PNG'); margin-top: -6.5%; padding-right: 53px; float:right; height: 19px; } 

и его работы для меня 🙂

Лучший способ обработки изображений во всех веб-браузерах – использовать свойство background css с размером фона. Тем не менее, IE8 и более низкая версия не поддерживают его (представляют собой 2% зрителя в 2014 году)

 .googlePic{ background: url('../../img/googlePlusIcon.PNG') -6.5% 53px no-repeat; background-size: contain; float:right; height: 19px; } 

Это спасло меня. Не забудьте удалить атрибут alt из img или вы найдете alt и фактическое изображение в Firefox.

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

У меня была такая же проблема в последнее время, и ни одно из вышеперечисленных решений не работало для меня. Я прибегал к следующей работе.

Я включил Bootstrap в свои проекты и использовал его class, отвечающий требованиям IMG . После этого я просто включаю изображение, используя . Он отображает и масштабирует красиво в каждом браузере и каждом размере видового экрана.

Надеюсь, это кому-то поможет.

Вы можете поэкспериментировать с установкой высоты и ширины в 0, добавлением отступов и установкой фонового изображения. Вам нужно будет отобразить его: блок или дисплей: встроенный блок, чтобы высота вступила в силу.

Вот пример: http://jsfiddle.net/zBgHd/1/

  • Автоматическое обновление браузера при изменении определенного файла в каталоге?
  • Имеет ли профиль Firefox в Dropbox хорошую комбинацию?
  • Как заставить Firefox использовать Bing в качестве поискового провайдера по умолчанию?
  • Принудительно просмотреть текстовый файл вместо загрузки в Firefox?
  • Подключение к настройкам прокси-сервера Firefox
  • Как написать Firefox Addon?
  • Как отключить кеш Firefox?
  • Найдите папку с закладками после поиска закладок в Firefox.
  • Может ли Firefox иметь две Windows или вкладки, открытые бок о бок, каждый для другого профиля (один для работы, один для личного использования)? IE 8 может, но не может запомнить профили
  • Отключить Tabbing в Firefox 3, Chrome 4 и IE8?
  • Копирование символов юникода из адресной строки Firefox, как и
  • Давайте будем гением компьютера.