Die Inhalts-URL zeigt das Bild im Firefox-Browser nicht an

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

Dies ist ein Beispiel meiner class googlePic in meiner css Datei. Es funktioniert und druckt gut auf google chrome und safari . Es funktioniert jedoch nicht auf firefox . Nth wird ausgedruckt. Bitte helfen Sie 🙂

   

Die Eigenschaft content funktioniert mit ::before und ::after .

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

Lesen Sie hierzu: http://www.htmldog.com/reference/cssproperties/content/

IE8 unterstützt nur die content wenn ein! DOCTYPE angegeben ist.

Ich weiß, dass dies eine späte Antwort ist, aber ich stieß auf das gleiche Problem.

Ich habe nachgeschaut und irgendwie ist eine URL kein gültiger “Content” -Typ und selbst Chrome und Safari sind die Guten und zeigen es nett.

Was für mich funktionierte, war das Erstellen eines leeren “Inhalts” und das Verwenden eines Hintergrunds, um das Bild zu zeigen: Es funktioniert gut in Chrome, Firefox, Safari und IE8 + 9

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

edit: vergessen, das: vorher nach dem classnnamen zu setzen

Sie müssen zwei CSS-class in Stil schreiben

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

und es funktioniert für mich 🙂

Die beste Möglichkeit, Bilder in allen Webbrowsern zu verarbeiten, ist die Verwendung der Hintergrund-CSS-Eigenschaft mit der Hintergrundgröße. IE8 und die niedrigere Version werden dies jedoch nicht unterstützen (repräsentieren 2% der Zuschauer im Jahr 2014)

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

Das hat mich gerettet. Denken Sie daran, alt Attribut aus dem img zu entfernen, oder Sie finden das alt und das tatsächliche Bild in Firefox.

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

Ich hatte in letzter Zeit das gleiche Problem und keine der oben genannten Lösungen funktionierte für mich. Ich habe mich auf die folgende Problemumgehung konzentriert.

Ich habe Bootstrap in meine Projekte aufgenommen und seine img-responsive class verwendet. Danach ich einfach das Bild mit dem -Tag ein. Es zeigt und skaliert wunderbar in jedem Browser und jeder Ansichtsfenstergröße.

Hoffentlich ist das hilfreich für jemanden.

Sie können experimentieren, indem Sie Höhe und Breite auf 0 setzen, ein Padding hinzufügen und das Hintergrundbild festlegen. Sie müssen es anzeigen lassen: blockieren oder anzeigen: Inline-Block, damit die Höhe wirksam wird.

Hier ist ein Beispiel: http://jsfiddle.net/zBgHd/1/