相同数量的像素在操作系统中呈现不同

我的网站上的滤镜栏 - 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版本全部搞砸了？我如何让它在两个操作系统中看起来都一样？ –

嘿，你可以看看我的评论，还需要一些帮助！ –

相同数量的像素在操作系统中呈现不同

回答

相关问题