在Mac瀏覽器上的兼容性問題

Question

我正在設計一個小網站（you can see it here），但我與從基於Mac的網絡瀏覽器到基於PC的瀏覽器發生衝突。它似乎在所有Mac瀏覽器上彈出，而不是在PC瀏覽器上彈出。我在Mac和Firefox/Internet Explorer上測試了Safari和Firefox。

左側的圖像來自PC，右側的圖像來自Mac。正如你所看到的，菜單下面有一個像素左右的間隙。菜單應與主要內容齊平。

爲什麼這樣做呢？我嘗試了所有我能想到但沒有成功的事情。

Answer 1

嘗試將菜單中的列表行高設置爲16px。

#menu ul { 
line-height: 16px; 
} 

Answer 2

這很簡單。您將<div id="menu">設爲50px高。但其內部的高度<ul>取決於字體指標，其高度（具有背景）也是如此。因此，根據使用的確切字體以及確切的字體柵格化算法，高度會有所不同。與此同時，您添加了一些頂部邊距，它試圖使箱子與下面的箱子齊平......但邊距的大小需要取決於文本的確切尺寸。

你有幾種選擇。您可以在菜單上切換到自動調整高度，並停止使用浮動來排列相鄰的東西;改爲使用display:inline-block。您可以切換到菜單上的自動高度，並使用clearfix來確保菜單的高度足以容納浮動。你可以明確地設置更高的高度和行高，以確保不管字體是什麼都會加起來（但是對於某些用戶來說，這將會非常糟糕;對於使用60px字體的用戶來說，你的50px高度不起作用因爲他們看不清楚）。