ie7中的导航菜单css样式子菜单间隙答案

【问题标题】：navigation menu css styling submenu gaps in ie7ie7中的导航菜单css样式子菜单间隙
【发布时间】：2011-08-12 06:24:46
【问题描述】：

我有一个由 Wordpress 生成的导航菜单，这意味着我几乎无法控制它的输出方式。

我已经使用 css 以我想要的方式通过悬停子菜单对其进行样式设置，但它在 IE7 中看起来不合适。在其他浏览器中没有任何问题。

即使在正常工作的浏览器中，主菜单也可能看起来关闭，因为我在我的网站上使用@fontface，但未包含在 jsFiddle 中。主要问题是子菜单项之间的差距。

我曾尝试垂直对齐子菜单 li 和 a，但它要么使情况变得更糟，要么没有解决问题。

我在这里复制了这个问题：[链接已删除]

如果我添加

#menu-header .sub-menu a { height: 100%; }

它修复了垂直间隙问题，但项目不再是相同的宽度。

【问题讨论】：

【解决方案1】：

您可以尝试以下方法：

#menu-header .sub-menu a { zoom: 1; }

这将消除间隙，但项目将与内部内容的宽度相同。

前段时间我也遇到过同样的问题。我所做的是，在li 中创建一个容器div。以便较长的文本可以换行，并设置静态宽度。您甚至可以使用 jQuery 动态调整每个下拉菜单的宽度，但那是完全不同的故事。

很少引用：

【讨论】：

检查了所有方法。 zoom: 1 留下不同的宽度。设置像素宽度和zoom: 1 意味着菜单没有灵活性（更长的单词会溢出）。浮动列表项也会导致不同的宽度。底部边框不起作用。
我想我必须适应固定宽度。我查看了 Wordpress 的 21 个主题，他们也做了同样的事情。
您可以为IE7及更低版本设置固定宽度css。所以好的浏览器会有不同的宽度。请参阅css-tricks.com/132-how-to-create-an-ie-only-stylesheet 并使用 IE7 及更低版本。 :)
我试图避免只使用 IE 样式表。我不想在我的标题中乱扔所有这些条件语句。还是谢谢。