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; } 

你要自己來調整，以適應外觀和感覺你想要的。除非文本實際上是一個圖像，否則您不會在所有瀏覽器和平臺上獲得完全一致的文本呈現，因此您只需要通過定義文本適合您想要在網頁上佈局的框來解決這個問題。