相同数量的像素在OS之间呈现不同

Question

我的网站上的过滤条 - 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渲染的图像。放大了违规区域。

最重要的是，地球图标和美元符号处于不同的高度。我不知道从哪里开始这个问题，任何提示都将不胜感激！

Answer 1

让我们一睹你的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”设置定义。填充底部是h3指定的5px。字体大小实际上是16px。 （10 + 5 + 16 == 31）。

将.filterhead的padding-top属性从10px更改为5px，它开始看起来像代表Mac渲染的pic中最初显示的内容。这应该可能适合你。

但无论怎样，我都永远无法用您在网站上出售的印有这枚500美元的礼服衬衫。这需要一些严肃的风格来拉开那个视线。

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

Answer 2

尝试使用CSS指定边距的大小。