html - 相同数量的像素在不同操作系统中渲染不同

Question

我网站上的过滤栏 - http://grailed.com在 Windows 和 Mac 上的 Chrome 中呈现不同，即使 Chrome 表示两者的高度都是 31px。

这是 Mac 渲染图。这就是我希望它显示的方式。

这是 PC 渲染图。放大违规区域。

除此之外，地球图标和美元符号的高度不同。我不知道从哪里开始解决这个问题，如有任何提示，我们将不胜感激!

Answer 1

让我们看一下您的 CSS(在通过 un-minimizer 运行并使用不同浏览器的一些 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 为 5px，由 h3 指定。字体大小实际上是 16px。 (10+5+16 == 31)。

将 .filterhead 的 padding-top 属性从 10px 更改为 5px，它开始看起来像代表 Mac 渲染的图片中最初显示的那样。这应该可以为您完成。

但无论如何，我永远无法撼动您在网站上出售的印有心形图案的 500 美元礼服衬衫。这需要一些严肃的风格来拉出那种外观。

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