除Opera之外，每個瀏覽器上的圖像鏈接幾個像素關閉

-1

我遇到問題the site我正在處理。除Opera之外，每個瀏覽器上的圖像鏈接幾個像素關閉

頂部標誌似乎有一些類似的邊緣，儘管我已經專門設置它沒有保證金，其父母沒有填充。

body{ 
    margin: 0; 
    padding: 0; 

    min-width: 320px; 

    background-image: url('../images/templates/background.png'); 

    font-family: 'Open Sans'; 
    font-size: 12px; 
    color: #303030; 
}

下面是不同的瀏覽器的圖像我測試：

odd margins

正如你所看到的，只有Opera似乎正常工作。現在有什麼問題嗎？或者它是瀏覽器的問題？

如果這是瀏覽器的問題，那麼解決此問題的最簡單方法是什麼？

來源

2013-04-23 TheJjokerR

這本來是如果你更好給了一個問題的jsfiddle而不僅僅是一個鏈接到您的網站 – Andrew 2013-04-23 13:57:26

作出了一個快速jsfiddle供將來參考：http://jsfiddle.net/Jxrw7/2/ – TheJjokerR 2013-04-23 14:05:12

這裏是我的更新到你的jsfiddle：http://jsfiddle.net/Jxrw7/4/你需要告訴你的圖像'display：block'它擺脫了所有瀏覽器添加到圖像的隱藏填充 – Andrew 2013-04-23 14:13:52

它是main.css中的98行，這就是你的問題。

.menuAvatar { 
vertical-align: middle; // THIS LINE 
margin: 0 5px 0 -15px; 
}

當垂直對齊被刪除時，圖像正確對齊。您可以使用其他方法來完成使用vertical-align的工作，也可以使用以下方法進行補償。

.menuAvatar { 
vertical-align: middle; 
margin: -3px 5px 0 -15px; 
}

我向margin-top添加了-3px以強制它在Chrome中對齊。（沒有在Firefox和其他測試）。

或者使用它來避免負邊距。

.menuAvatar { 
vertical-align: top; 
margin: 0 5px 0 -15px; 
}

來源

2013-04-23 14:00:48 Michael

在98 main.css線，您有以下規則：

.menuAvatar{ 
    vertical-align: middle; 
    margin: 0 5px 0 -15px;; 
}

我建議設置vertical-align到top，導致：

.menuAvatar{ 
    vertical-align: top; 
    margin: 0 5px 0 -15px; 
}

來源

2013-04-23 14:01:26 Barney

非常完美，非常感謝大家！ – TheJjokerR 2013-04-23 14:03:56

除Opera之外，每個瀏覽器上的圖像鏈接幾個像素關閉

回答

相關問題