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

我的网站上的过滤条——在Windows和Mac上的Chrome中呈现方式不同，尽管Chrome说两者的高度都是31px

下面是Mac渲染的图像。这就是我想要它出现的方式。

这是电脑渲染的图像。放大了攻击区域。

---

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

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

让我们看一看您的CSS（在运行了一个un-minimizer并使用了不同浏览器的一些DOM检查工具之后）：

标题的大部分高度由filterhead类指定的“padding top:10px”设置定义。根据h3的规定，填充底部为5px。字体大小实际上是16px。（10+5+16==31）

将.filterhead的padding top属性从10px更改为5px，它开始看起来像最初在代表Mac渲染的图片中显示的内容。这可能对你有用

但不管怎样，我永远也无法撼动你们在网站上出售的印有心形图案的500美元礼服衬衫。这需要一些严肃的风格才能让你看起来很好

---

我有CSS指定大小和边距。试穿一下，只需花一小笔钱。哈哈，我打赌你一定能成功！如果我把padding top改为5px，那么Mac版本就全搞糟了？我如何让它在两个操作系统中看起来都一样？嘿，伙计，你能看看我的评论吗，还需要一些帮助！我必须在我的Mac上安装Chrome。。。可能需要一两天时间。。。我会看看我能做些什么。谢谢你，伙计，这将意味着很多。我不能用我的生命来解决这个问题。

.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;
}