內容url在Firefox瀏覽器上不顯示圖像

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

}

這是我的css文件中的類googlePic的一個示例。它可以在google chrome和safari上很好地打印出來。但是，它不適用於firefox。 Nth被打印出來。請幫忙:)內容url在Firefox瀏覽器上不顯示圖像

來源

2013-07-28 user2625152

我不認爲你可以使用'內容'這種方式。改用「背景」。 – putvande

檢查是否有幫助：http://stackoverflow.com/questions/12262118/content-url-is-not-working-in-firefox – Harry

content房產適用::before和::after。如果指定了DOCTYPE是 http://www.htmldog.com/reference/cssproperties/content/

IE8只支持content屬性：

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

閱讀本。

來源

2013-07-28 11:50:53

在Firefox中，：之前沒有爲我工作，但：之後，據報道通過Ahetesum Ali – CyberMonk

你必須寫兩個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; 

}

及其作品對我來說:)

來源

2014-03-27 08:34:32 DropAndTrap

對我來說沒什麼。火狐瀏覽器和IE瀏覽器 - 沒有反應 –

在我的情況：在僞元素得到Firefox渲染後，但不是：在 – icelava

之前我不是一個expart在css剛剛發現上面的答案後改變之前到它工作 – DropAndTrap

我知道這可能是一個遲到的反應，但我遇到了同樣的問題。

我看着它，不知怎麼的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; 
}

編輯：忘了放：類名

來源

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

這是解決方案，應標記爲答案。出於某種原因，某些瀏覽器不接受url作爲內容。 –

在這不起作用之後還有什麼可嘗試的嗎？ – ArtforLife

不起作用！ – TetraDev

在整個所有的Web瀏覽器處理圖像的最佳方式前後是使用背景CSS屬性的背景大小。但是，IE8和更低版本將不會支持它(represent 2% of viewer in 2014)

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

來源

2014-09-23 13:07:45 Romain

-4

您可以設置寬度和高度爲0實驗，添加填充，並且設置背景圖片。您必須使其顯示：block或display：inline-block才能使高度生效。

下面是一個例子： http://jsfiddle.net/zBgHd/1/

來源

2015-02-24 11:32:26

最近我有同樣的問題，上述工作沒有任何解決方案，爲我。我採取了以下解決方法。

我包括引導在我的項目，並利用其img-responsive類。之後，我只需使用<img class="img-responsive">標籤包含圖像。它可以在每個瀏覽器和每個視口尺寸上進行精美的顯示和縮放。

但願這是有幫助的人。

來源

2016-04-28 14:50:27 ArtforLife

這救了我。請記住要從img中刪除alt屬性，否則您會在Firefox中找到alt和實際圖像。

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

來源

2017-05-05 14:16:32 SrAxi

內容url在Firefox瀏覽器上不顯示圖像

回答

相關問題