Mac浏览器的兼容性问题答案

【问题标题】：Compatibility problem on Mac browsersMac浏览器的兼容性问题
【发布时间】：2011-05-03 21:00:43
【问题描述】：

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

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

为什么要这样做？我已经尝试了所有我能想到的方法，但都没有成功。

【问题讨论】：

我不知道你是否已经知道，但是在 Ubuntu 中，使用 Firefox 3.5，也有 1px 的差距，不仅在 Mac 上。我希望有人可以帮助你！

标签： css macos cross-browser html

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：