Content-URL nicht angezeigt Bild auf Firefox-Browser

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

}

Dies ist ein Beispiel meiner Klasse googlePic in meiner css Datei. Es funktioniert und druckt schön auf google chrome und safari. es funktioniert jedoch nicht auf firefox. Nth wird ausgedruckt. Bitte helfen Sie :)Content-URL nicht angezeigt Bild auf Firefox-Browser

Quelle

2013-07-28 user2625152

Ich glaube nicht, dass Sie "Inhalt" auf diese Weise verwenden können. Verwenden Sie stattdessen "Hintergrund". – putvande

Überprüfen Sie, ob dies hilft: http://stackoverflow.com/questions/12262118/content-url-is-not-working-in-firefox – Harry

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

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

dies lesen: http://www.htmldog.com/reference/cssproperties/content/

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

Quelle

2013-07-28 11:50:53

In Firefox,: vor hat nicht für mich funktioniert, aber: nach, wie berichtet von Ahetesum Ali – CyberMonk

müssen Sie zwei CSS-Klasse 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 seine Werke für mich :)

Quelle

2014-03-27 08:34:32 DropAndTrap

Nichts für mich. Firefox und IE - keine Reaktion –

In meinem Fall: nach Pseudo-Element bekommt Firefox zu rendern, aber nicht: vor – icelava

Ich bin kein expart in CSS gerade gefunden die obige Antwort später ändert die vorher zu nachdem es funktioniert – DropAndTrap

Ich weiß, dass dies eine späte Antwort sein kann, aber ich kam über das gleiche Problem.

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

Was für mich gearbeitet wurde einen leeren 'Inhalt' und mit einem Hintergrund zu schaffen, das Bild zeigen: es schön 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; 
}

bearbeiten funktioniert: vergessen zu lege das: vor nach dem Klassennamen

Quelle

2014-06-12 13:12:42 0MBB0

Dies ist die Lösung und sollte als Antwort markiert werden. Aus irgendeinem Grund akzeptieren einige Browser keine URL als Inhalt. –

Gibt es noch etwas zu versuchen, nachdem dies nicht funktioniert? – ArtforLife

Funktioniert nicht !! – TetraDev

Der beste Weg, um Bilder in allen Web-Browsern zu behandeln, ist die Hintergrund-CSS-Eigenschaft mit der Hintergrundgröße zu verwenden. jedoch IE8 und niedrigere Version wird es nicht (represent 2% of viewer in 2014)

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

Quelle

2014-09-23 13:07:45 Romain

-4

Sie mit der Einstellung der Höhe und Breite auf 0 können experimentieren unterstützen, eine Polsterung und stellen Sie das Hintergrundbild hinzufügen. Sie müssen es anzeigen lassen: blockieren oder anzeigen: Inline-Block, damit die Höhe wirksam wird. Hier

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

Quelle

2015-02-24 11:32:26

Ich hatte das gleiche Problem vor kurzem, und keine der oben genannten Lösungen für mich gearbeitet. Ich habe mich auf die folgende Problemumgehung konzentriert.

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

Hoffentlich ist dies hilfreich für jemanden.

Quelle

2016-04-28 14:50:27 ArtforLife

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

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

Quelle

2017-05-05 14:16:32 SrAxi

Content-URL nicht angezeigt Bild auf Firefox-Browser

Antwort

Verwandte Themen