Mac上的字体渲染VS. PC

Question

我正在使用CSS创建网页，并且我注意到Mac（Safari）渲染的字体比PC（其他浏览器）更宽和更粗。

我有10个类别水平显示固定宽度尺寸为960px。我使用填充来在每个类别之间留出一些空间，并且它在PC上看起来很棒，但是当我在Safari上看到它时，由于更宽的字体渲染，它创建了两行。我知道有一种方式来攻击IE，但与Safari。

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

Answer 1

由于围绕跨平台字体渲染的细节编写CSS是非常困难的，所以我推荐诸如变量填充。

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

ul li { 
    display: table-cell; 
} 

jsFiddle。

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

Answer 2

如果您想确保您的类别框不会跨越两行，您必须修正这些框的宽度，使它们始终合计为960像素。

例如：

<div class="container"> 
    <div class="category">...</div> 
    ...(9 more)... 
    </div> 
<div> 

.container { width: 960px; margin: 0 auto; } 
.category { width: 86px; padding: 5px; float:left; } 

你要自己来调整，以适应外观和感觉你想要的。除非文本实际上是一个图像，否则您不会在所有浏览器和平台上获得完全一致的文本呈现，因此您只需要通过定义文本适合您想要在网页上布局的框来解决这个问题。