导航菜单css样式在ie7中的子菜单空白

我有一个由WordPress生成的导航菜单，这意味着我几乎不能控制它的输出。导航菜单css样式在ie7中的子菜单空白

我已经使用CSS来按照我想要的方式悬停子菜单，但它在IE7中看起来不合适。它在其他浏览器中没有任何问题。

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

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

我复制了这里的问题：如果我添加

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

它修复的垂直间距问题，但项目不再相同的宽度[链接删除]

。

2011-08-12 gavsiu

你可以尝试以下方法：

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

这将消除差距，但项目将是相同的宽度内的内容。

前段时间我有同样的问题。我所做的是，在li内部创建一个容器div。以便更长的文本可以换行，并设置一个静态宽度。你甚至可以使用jQuery来动态调整每个下拉菜单的宽度，但这是一个完全不同的故事。

一些参考：

2011-08-12 07:12:48

检查了所有的方法。 “zoom：1”的宽度各不相同。设置px宽度和“zoom：1”意味着菜单没有灵活性（较长的单词只会溢出）。浮动列表项目也会导致不同的宽度。底部边框不起作用。 – gavsiu

我想我必须用固定宽度来解决。我看了Wordpress的Twenty Eleven主题，他们也做了同样的事情。 – gavsiu

您可以为IE7及更低版本设置固定宽度的CSS。所以好的浏览器会有不同的宽度。请参阅http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/并使用IE7及更低版本。 :) –

回答