相同數量的像素在操作系統中呈現不同

我的網站上的濾鏡欄 - http://grailed.com在Windows和Mac上的Chrome中呈現不同的效果，即使Chrome說兩者的高度均爲31px。相同數量的像素在操作系統中呈現不同

這是Mac渲染的圖像。這是我希望它顯示的方式。 Here is an image on Mac. http://f.cl.ly/items/2R160H323W2H2v1e3l3O/Screen%20Shot%202014-02-25%20at%203.19.02%20PM.png

這是PC渲染的圖像。放大違規區域。 Here is an image on PC.

最重要的是，地球圖標和美元符號位於不同的高度。我不知道從哪裏開始這個問題，任何提示將不勝感激！

來源

2014-02-25 Arun Gupta

嘗試使用CSS來指定邊距的大小。

來源

2014-02-25 23:48:55 user3263959

我有指定大小和邊距的CSS。 –

讓我們窺見你的CSS（正在通過一個未最小化運行後，並使用一些DOM的不同瀏覽器的檢查工具）：

.filterhead { 
    text-align: center; 
    cursor: pointer; 
    background-color: #e1e1e1; 
    padding-top: 10px; 
} 

... 

h3 { 
    font-family: "SackersGothicStd-Heavy"; 
    text-transform: uppercase; 
    font-size: 13px; 
    letter-spacing: 6px; 
    padding-bottom: 5px; 
    padding-top: 4px; 
    color: black; 
    font-weight: normal; 
}

大多數你的頭的高度是由filterhead類指定的「padding-top：10px」設置定義。 padding-bottom是由h3指定的5px。字體大小實際上是16px。（10 + 5 + 16 == 31）。

將.filterhead的padding-top屬性從10px更改爲5px，它開始看起來像最初在表示Mac渲染的圖片中顯示的內容。這應該可以爲你做。

但是無論如何，我永遠無法擺脫那500美元的禮服襯衫印在你的心上，你有你的網站上出售。這需要一些嚴肅的stylin'來拉開那個眼神。

http://assets3.grailed.com/uploads/photo/image/11138/display_upload_2F1393376651400-xu5dk1ezfx-b4c0f2f9854185bc01c09e5a9b232221_2F

來源

2014-02-26 05:09:13 selbie

試試吧，它只花了一小筆錢。 – Nit

哈哈我敢打賭你可以把它拉開！如果我將填充頂部更改爲5像素，那麼Mac版本全部搞砸了？我如何讓它在兩個操作系統中看起來都一樣？ –

嘿，你可以看看我的評論，還需要一些幫助！ –

相同數量的像素在操作系統中呈現不同

回答

相關問題