更详细。我正在处理一个jcink论坛。在论坛上有,例如,一个带有margin: 50px 0
参数的元素。
在Windows上,这个位置是居中的,但在Mac电脑上,特别是,它的位置太高了。这很难排除故障,因为它不是Safari的问题或媒体查询的问题,所以我不能简单地改变我的浏览器窗口(或使用开发工具来模拟分辨率)来检查问题,因为我在PC上。我有一个朋友有一台苹果电脑,我可以远程进入,偶尔排除故障。
我还注意到,如果我完全删除了元素的边距,在Mac上它会设置在容器的顶部,但在PC上似乎几乎有20px左右的填充。
与此问题类似,在周围元素中,PC与Mac底部的空间(边距)更少。例如,当我添加25px时,它在PC上看起来很好,但在Mac上添加了太多。
总的问题是:为什么CSS在Mac上的渲染和在PC上的渲染不同,我该如何标准化它,使更改保持一致?2这个站点上只有少数用户有Mac,但不管操作系统是什么,它都应该工作。
我将添加受影响的论坛和相关代码。
以下是链接(只需单击复选标记即可跳过第一页):
https://colu.jcink.net/index.php?showtopic=5560
标题区域的名称“盖伊加德纳”是我们正在寻找的。如果你是在PC上,它是正确的对齐。如果你是在Mac上,它不是。
PC,格式正确:https://i.stack.imgur.com/lDtPz.png
顶栏中的容器包含帖子标题信息:
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用户。
1条答案
按热度按时间mnemlml81#
我找到了解决这个问题的方法。首先,我确实需要应用CSS重置。我需要这样做是因为chrome有一个默认的8 px边距。我花了一些时间才意识到这个边距由于某种原因在mac的chrome上没有显示。我使用了这个重置,并在应用它之前研究了每个元素的作用:https://github.com/necolas/normalize.css/blob/master/normalize.css
其次,我发现网站上使用的特定字体的行高呈现方式也存在问题(尽管重置也应用了1.15行高的修复)。结果,在PC版Chrome中,字体顶部出现了空格,而在Mac版Chrome中却没有出现。讽刺的是,这导致了8 px的差异。这使我相信这是一个默认的边距问题,即使我已经对html/body应用了边距重置。
为了解决字体问题,我通过一个web字体生成器运行了字体,它可以将系统字体转换为web字体使用,并确保选择了“修复垂直度量”选项,该选项会删除多余的行高空间。Transfonter是我用来做这件事的网站:https://transfonter.org
如果有人还有什么要补充的,我可能错过了,请让我知道,但这些步骤修复了我的问题。谢谢。
当查看不一致的操作系统或浏览器问题时,请记住检查字体和行高。