为什么向我的 CSS 添加 font:menu 会导致页面呈现非常不同?

发布于 2024-11-29 04:57:40 字数 403 浏览 1 评论 0原文

我似乎找不到有关“菜单”字体的太多信息。

我正在尝试基于 这个图例,同时尝试保持现有的外观和效果感受基于 Intranet 的应用程序。

一旦我将:添加

font:menu;

#nav a 样式中,#nav 中设置的行高在 FF 和 Chrome 中都会被忽略,但在 IE 8 中不会

。是什么字体?我有哪些不会破坏菜单的替代方案?

I can't seem to find much information on the "menu" font.

I'm trying to implement suckerfish-style CSS menus based on this turorial, while trying to maintain an existing look & feel for an intranet-based application.

As soon as I add:

font:menu;

to the #nav a style, the line-height set in #nav is ignored in both FF and Chrome, but not in IE 8.

What is the "menu" font? What alternatives do I have that won't break the menus?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

兮颜 2024-12-06 04:57:40

不确定 line-height 问题(我建议准备一个小测试用例并将其发布在此处),但 menu 字体在 CSS 规范

以下值指的是系统字体:

标题
用于带标题的控件(例如按钮、下拉菜单、
等)。
图标
用于标记图标的字体。
菜单
菜单中使用的字体(例如,下拉菜单和菜单列表)。
消息框
对话框中使用的字体。
小标题
用于标记小控件的字体。
状态栏
窗口状态栏中使用的字体。

但是,像往常一样,浏览器往往会提供相当可变的规范遵从程度。


编辑:只需阅读链接即可。这些字体也会重置其他属性。您是否尝试过 line-height: 1 !important; :-?

Not sure about the line-height issue (I recommend to prepare a small test case and post it here), but the menu font is described in the CSS spec:

The following values refer to system fonts:

caption
The font used for captioned controls (e.g., buttons, drop-downs,
etc.).
icon
The font used to label icons.
menu
The font used in menus (e.g., dropdown menus and menu lists).
message-box
The font used in dialog boxes.
small-caption
The font used for labeling small controls.
status-bar
The font used in window status bars.

But, as usual, browsers tend to offer pretty variable compliance degrees with specifications.


Edit: just read the link. These fonts reset other properties as well. Have you tried line-height: 1 !important; :-?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文