La URL del contenido no muestra la imagen en el navegador Firefox

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

Este es un ejemplo de mi clase googlePic en mi archivo css . Funciona e imprime muy bien en google chrome y safari . sin embargo, no funciona en firefox . Nth se imprime. Por favor ayuda ūüôā

La propiedad del content funciona con ::before y ::after .

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

Lea esto: http://www.htmldog.com/reference/cssproperties/content/

IE8 solo admite la propiedad de content si se especifica! DOCTYPE.

Sé que puede ser una respuesta tardía, pero me encontré con el mismo problema.

Lo busqu√© y, de alguna manera, una url no es un tipo v√°lido de “contenido” e incluso si Chrome y Safari son los buenos y lo muestran muy bien.

Lo que funcion√≥ para m√≠ fue crear un ‘contenido’ vac√≠o y usar un fondo para mostrar la imagen: funciona muy bien en Chrome, Firefox, Safari e IE8 + 9

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

editar: se olvidó de poner el: antes después del nombre de clase

tienes que escribir dos clases de CSS con estilo

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

y funciona para m√≠ ūüôā

La mejor forma de manejar im√°genes en todos los navegadores web es usar la propiedad background css con el tama√Īo de fondo. Sin embargo, IE8 y la versi√≥n anterior no lo admitir√°n (representan el 2% del visor en 2014)

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

Esto me salvó. Recuerde eliminar el atributo alt del img o encontrará el alt y la imagen real en Firefox.

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

Recientemente tuve el mismo problema y ninguna de las soluciones anteriores funcionó para mí. He recurrido a la siguiente solución.

Inclu√≠ Bootstrap en mis proyectos y us√© su clase img-responsive . Despu√©s de eso, simplemente incluyo la imagen usando la . Se muestra y se ampl√≠a maravillosamente en cada navegador y en cada tama√Īo de ventana.

Espero que esto sea √ļtil para alguien.

Puede experimentar estableciendo alto y ancho en 0, agregar un relleno y establecer la imagen de fondo. Deberá hacer que muestre: bloque o pantalla: bloque en línea para que la altura surta efecto.

Aquí hay un ejemplo: http://jsfiddle.net/zBgHd/1/