Mac浏览器的兼容性问题

Question

我正在设计一个小网站（you can see it here），但是我遇到了从基于Mac的网络浏览器到基于PC的浏览器的冲突。它似乎出现在所有Mac浏览器上，而不是PC浏览器上。我已经在Mac上的Safari和Firefox以及PC上的Firefox / Internet Explorer上进行了测试。

左侧的图像来自PC，右侧的图像来自Mac。如您所见，菜单下方有一个像素左右的间隙。菜单应与主要内容齐平。

为什么这样做？我已经尝试了所有我能想到的事情而没有成功。

Answer 1

尝试将菜单中列表的行高设置为16px。

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

Answer 2

这很简单。您将<div id="menu">的样式设置为50px高。但其中<ul>的高度取决于字体指标，其孩子的高度（具有背景）也是如此。因此，根据所使用的确切字体和精确的字体光栅化算法，高度会有所不同。同时，你添加一些顶部边距，试图使那里的框与下面的框齐平......但是边距的大小需要取决于文本的确切大小。

您有几种选择。您可以在菜单上切换到自动高度并停止使用浮动来将事物放在一起;请改用display:inline-block。您可以在菜单上切换到自动高度并使用clearfix确保菜单足够高以包含浮动。您可以明确设置更高的高度和线高，以确保无论字体是什么都会增加（但是对于某些用户来说这会非常糟糕;对于使用60px字体的用户，您的50px高度将无法正常工作因为他们看不太清楚。）