OSX 字体宽度与标准跨平台字体的窗口不同
我的网页上有一个水平流动的 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 窗口上渲染得更宽一些。
这是对的吗？我认为被称为跨平台字体的字体会呈现相同的效果。这可能是不好的做法吗[我正在添加填充 a 元素以增加单击的目标大小]
I have a css menu on a webpage that is flowed horizontaly, as the items text in the menu are different widths I have used a padded amount around the text so that the entire menu takes up close to 100% of my page width. The structure is something like this
<ul>
<li><a href="#"> item 1</a></li>
<li><a href="#"> item 1</a></li>
<li><a href="#"> item 1</a></li>
</ul>
This looks fine in windows under a variety of browsers include Safari on windows. But on OSX safari / firefox the same emnu ahs an element pushed to the next line - breaking the menu. It seem that a 12px high Arial font is rendered a little wider on OSX the windows.
Is this right? I thought that the font reffered to as a cross platform font would be rendered the same. Is this perhaps poor practice [I'm adding padding the the a element to increase the target size for clicking on]
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
字体渲染因操作系统而异，我们对此无能为力。
如果您严格需要该菜单与整个页面一样宽，我看到两种解决方案：
display: table每个菜单项上的容器和display: table-cell。下面是第二种策略的示例： http://jsfiddle.net/MartinodF/J8GX3/
请注意IE7 不支持
display: table。Font rendering differs from one OS to another, and there's not much we can do about it.
If you strictly need that menu to be as wide as the entire page, I see two solutions:
display: tableon the<ul>container anddisplay: table-cellon each menu item.Here's an example of the second strategy: http://jsfiddle.net/MartinodF/J8GX3/
Note that
display: tableis not supported by IE7.