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/