相同数量的像素在不同操作系统之间呈现不同答案

【问题标题】：Same amount of pixels rendering differently across OSes相同数量的像素在不同操作系统之间呈现不同
【发布时间】：2019-09-13 05:07:42
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css macos google-chrome

【解决方案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 为 h3 指定的 5px。字体大小实际上是 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

【讨论】：

试一试，只要花不小的钱。
哈哈，我敢打赌你能成功！如果我将 padding-top 更改为 5px，那么 Mac 版本就全乱了？如何让它在两个操作系统中看起来一样？
嘿伙计，你能看看我的评论吗，还需要一些帮助！
我必须在我的 Mac 上安装 Chrome...可能需要一两天...我会看看我能做些什么。
谢谢，这意味着很多。我这辈子都解决不了这个问题。

【解决方案2】：

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

【讨论】：

我有 CSS 指定大小和边距。