html - OSX 字体宽度与标准跨平台字体的窗口不同

Question

我在网页上有一个水平流动的 css 菜单，因为菜单中的元素文本宽度不同我在文本周围使用了填充量，以便整个菜单占据我页面宽度的接近 100% .结构是这样的

<ul>
<li><a href="#"> item 1</a></li>
<li><a href="#"> item 1</a></li>
<li><a href="#"> item 1</a></li>
</ul>

在各种浏览器(包括 Windows 上的 Safari)下，这在 Windows 中看起来不错。但是在 OSX safari/firefox 上，相同的 emnu ahs 一个元素被推到下一行 - 打破了菜单。看起来 12px 高的 Arial 字体在 OSX Windows 上渲染得有点宽。

这样对吗？我认为被称为跨平台字体的字体会呈现相同的效果。这可能是不好的做法吗[我在 a 元素中添加填充以增加点击的目标大小]

Answer 1

字体渲染因操作系统而异，对此我们无能为力。

如果您严格要求该菜单与整个页面一样宽，我看到两个解决方案:

• 为每个菜单项分配相同的宽度(并确保文本内容适合)
• 使用display: table在 <ul> 上容器和display: table-cell在每个菜单项上。

这是第二种策略的示例:http://jsfiddle.net/MartinodF/J8GX3/

请注意 display: table是not supported通过 IE7。