css - Mac VS 上的字体渲染。个人电脑

Question

我正在使用 CSS 创建网页，我注意到 Mac(Safari)呈现的字体比 PC(其他浏览器)更宽和更粗。

我有十个类别水平显示，宽度固定为 960 像素。我使用填充在每个类别之间留出一些空间，它在 PC 上看起来很棒，但是当我在 Mac 上使用 Safari 看到它时，由于字体渲染更宽，它创建了两行。我知道有一种破解 IE 的方法，但需要使用 Safari。

在 Safari 和其他浏览器上正确显示的最佳方式是什么？

Answer 1

由于围绕跨平台字体渲染的微妙之处编写 CSS 非常困难，因此我推荐诸如可变填充之类的东西。

ul {
   display: table;
   width: 100%;
}

ul li {
   display: table-cell;
}

jsFiddle .

您选择适用于所测试平台的字体大小，然后让display: table-cell 计算填充。