更多细节。我在和一个瘾君子论坛合作。例如，在论坛上有一个带有margin: 50px 0参数的元素。
在Windows操作系统中，它是居中的，但在Mac电脑上，它的位置太高了。这很难排除故障，因为它不是Safari问题或媒体查询问题，所以我不能简单地改变我的浏览器窗口(或使用开发人员工具来模拟分辨率)来检查问题，因为我在PC上。我有一个朋友有一台苹果电脑，我可以远程控制它，偶尔用它来排除故障。
我还注意到，如果我完全删除元素的边距，在MAC上，它设置在容器的顶部，但在PC上，似乎几乎有一个20px左右的填充。
与此问题类似，在PC上，与Mac相比，周围元素的底部空间(边距)更少。例如，当我添加25px时，它在PC上看起来很好，但在Mac上又增加了太多。
总的问题是:为什么Mac上的CSS呈现与PC上的不同，我如何将其标准化以使变化一致?本网站只有少数用户使用mac电脑，但无论使用何种操作系统，都应该可以正常工作。
我正在添加受影响的论坛和有问题的代码。'
这是链接(只需点击选中标记就可以进入第一页):
https://colu.jcink.net/index.php?showtopic=5560
标题为"Guy Gardner"这就是我们所看到的。如果你是在PC上，它是正确对齐的。如果你使用的是Mac，则不是。
PC，格式正确:https://i.stack.imgur.com/lDtPz.png
顶部栏中包含post header信息的容器:
height: 150px;
background: rgba(0,0,0,.8);
background-image: radial-gradient(rgba(255,255,255,1), rgba(0,0,0,1)), url(https://us-east-1-02860049-view.menlosecurity.com/c/0/i/aHR0cHM6Ly9pbWFnZXM4LmFscGhhY29kZXJzLmNvbS85NzQvOTc0NjgyLmpwZw~~?b=GyXJkglY&k=4gWbxECk-JP1jGISJKN_BinYM4QYfjipF4RFQU7liIE~);
background-size: cover;
background-attachment: fixed;
background-blend-mode: multiply;
color: var(--mgroup);
font-family: 'DC Fandom';
font-size: 2vw;
text-align: left;
text-transform: uppercase;
text-shadow: var(--colour4) 1px 0px;
letter-spacing: -1px;
overflow: hidden;
z-index: 3;
border-top: 10px solid var(--mgroup);
}```
```.ecmpost .ectopbar {
padding-bottom: 25px;
}```
One of the issues is that the padding (on the 1920 media query at least) adds too much padding on Mac, though on PC it's perfectly aligned.
Another issue has to do with the name on the left side, for example "Guy Gardner." is to high on Mac but centered (mostly) on PC.
```.topbarname {
padding: 50px 0px;
z-index: 2;
position: relative;
display: inline-block;
letter-spacing: 0px;
margin-left: 120px;
}```
(I don't prefer using absolute/relative positioning, someone else wrote this code, but I did confirm this was not the issue)
我尝试媒体查询，但这不是浏览器大小的问题(我认为它最初)。我发现它只影响Mac用户。
我找到了解决手头问题的方法。首先，我确实需要应用CSS重置。我需要这样做，因为chrome有一个默认的8px边距。我花了一些时间才意识到，由于某种原因，这个边距在mac的chrome上没有显示。我使用这个重置并在应用它之前研究了每个元素的作用:https://github.com/necolas/normalize.css/blob/master/normalize.css
其次，我发现在网站上使用的特定字体呈现行高的方式也存在问题(尽管重置确实应用了1.15行高修复)。因此，在PC版的Chrome浏览器中，它会导致字体顶部出现空白，而在Mac版的Chrome浏览器中则不会呈现。具有讽刺意味的是，这导致了8px的差异，这让我相信这是一个默认的边距问题，即使我已经应用了重置html/body的边距。
为了解决字体问题，我通过一个web字体生成器将字体转换为web字体使用，并确保选择"修复垂直度量";选项，用于擦除额外的行高空间。Transfonter是我用来做这个的网站:https://transfonter.org
如果有人有任何其他补充，我可能错过了，请让我知道，但这些步骤解决了我的问题。谢谢你。
当看到不一致的操作系统或浏览器问题时，记得检查你的字体和行高。