圖片在Chrome和Mozilla中存在差異

在Mozilla瀏覽器中看起來很完美，在Chrome瀏覽器中瀏覽不完美的圖片。這裏是圖像。任何人都可以告訴我爲什麼這些類型的錯誤，以及如何解決它。圖片在Chrome和Mozilla中存在差異

第一個是Mozilla，第二個是Chrome。

Mozilla Chrome

CSS代碼是，

.freeimg 
{ 
    position   : relative; 
    top     : 80px; 
    border    : 1px solid #CCCCCC; 
    border-right  : 0; 
    background-color : #FFF; 
    cursor    : pointer; 
    margin-left   : -35px; 
    -moz-border-radius : 10px 0px 0px 10px; 
}

的HTML代碼是正常如常。

<div class="fl freeimg" style="float:left;"> 
<img src="/images/freeImg.gif" height="160" width="32" onClick="SlideMe()" /> 
</div>

來源

2013-01-02 Vignesh Gopalakrishnan

你的代碼??? ... – Sowmya

請檢查CSS代碼。 –

這是你的代碼？有人在乎？你看到它的一些隨機站點？你能以任何方式發佈代碼嗎？ – 2013-01-02 07:38:00

JavaScript的檢查條件

if (navigator.appVersion.indexOf("Chrome/") != -1) { 
// modify button 
}

下，這給你的CSS改變只對鉻

來源

2013-01-02 07:41:32 prasobh

你必須編寫有條件的CSS註釋來解決這種類型的問題。這不過是一個CSS問題。請發佈您的代碼。可能這將是解決這一問題

像下面的代碼

檢查在Firefox元，調整爲Firefox瀏覽器的CSS樣式單獨的CSS文件，並在下面添加

代碼有用（$ .browser.mozilla == true）{ document.write（「」）; }如果爲此目的使用改變CSS動態

來源

2013-01-02 07:36:20 Rithu

嘗試通過加載一個樣式表這樣做CSS復位第一作爲一個解釋這裏：

http://developer.yahoo.com/yui/reset/

乙rowser有不同的默認，除非你用自己的設置覆蓋這些值，它們可能仍然適用。在您的具體情況下，我會嘗試添加：

padding: 0; 
margin: 0;

並查看是否消除了差異。但是，如上所述使用reset.css是避免這種差異的最佳實踐。

來源

2013-01-02 07:47:05

謝謝你的回覆Anony。它不起作用。 –

哦，你爲什麼使用'-moz-border-radius'？ –

沒有具體原因。首先我檢查了mozilla，後來我檢查了鉻。如果我刪除該行，它不起作用。 –

添加font-size:0

HTML

<div class="fl freeimg"> 
<img src="http://www.brightpay.co.uk/i/signup-launcher.png" onClick="SlideMe()" /> 
</div>

CSS

.freeimg 
{ 
    position   : relative; 
    float:left; 
    top     : 80px; 
    border    : 1px solid #CCCCCC; 
    border-right  : 0; 
    background-color : #FFF; 
    cursor    : pointer; 
    border-radius : 10px 0px 0px 10px; 
    font-size:0 
}  
.freeimg img 
{   
    border-radius : 10px 0px 0px 10px; 
    margin:0; padding:0 
}

DEMO

來源

2013-01-02 07:49:25 Sowmya

謝謝你的回覆sowmya。雖然這在小提琴中奏效，但對我來說卻是失敗的。 –

圖片在Chrome和Mozilla中存在差異

回答

相關問題