Question

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

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

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

Answer 1

由于围绕跨平台字体渲染的微妙之处编写CSS非常困难，我建议使用变量填充等内容。

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

ul li {
   display: table-cell;
}

jsFiddle

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

Answer 2

如果您想保证您的类别框不跨越两行，您必须修改框的宽度，使它们总是合计为960px。

例如：

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

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

您只需调整它以适合您想要的外观和感觉。除非文本实际上是图像，否则您不会在所有浏览器和平台上获得完全一致的文本呈现，因此您只需要通过定义文本适合您希望它在页面上布局的方式来解释这一点

Mac上的字体渲染VS.个人计算机

2 个答案: