我试图将一些符号垂直居中放置在一个方框内。但是我无法让符号在 OSX 和 Windows 中都垂直对齐
这是我用来演示这个问题的一个非常简单的例子 http://dabblet.com/gist/2971548
你会注意到 x 在 Windows 中是垂直居中的,但在 OS X 中不是。 如何解决此问题?
最佳答案
您在 Mac OS X 和 Windows 中看到的差异是因为使用了两种不同的字体,并且这些特定符号相对于基线的高度不同。垂直居中使字体居中,而不仅仅是字符串中的字符。
您的 CSS 字体堆栈指定“Helvetica Neue、Helvetica、Arial、sans-serif”。在 Mac OS X 下,将使用 Helvetica Neue。在 Windows 下,Helvetica Neue(通常)不存在,甚至普通的 Helvetica 也不存在,因此几乎可以肯定使用了 Arial。在没有这些字体的其他平台上,您很有可能会得到不同的结果。
以下链接的图形显示了叠加的两种字体的符号,设置为公共(public)基线。 Helvetica Neue 为红色; Arial 是绿色的。你可以很清楚地看到,Helvetica Neue 中的符号比 Arial 中的符号低很多:
comparison of multiplcation signs
此处最好的解决方法是使用@font-face 字体来确保在两个(所有)平台上使用完全相同的字体。有许多免费和商业服务提供字体数据来执行此操作。我将留给您搜索并确定最适合您的特定应用的内容。
关于css - 垂直对齐文本 Mac 和 PC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11153336/