css - IE6和IE7菜单显示:block with padding isn't allowing complete selection

Question

我正在为一个客户开发一个站点，在 IE8+ 和其他所有工具(Windows 和 Mac)下一切都运行良好。

http://www.cirkut.net/wp/libertyguide/

如果您使用 IE6 和 IE7 以外的浏览器前往该页面，您会发现可以将鼠标悬停在菜单的任何部分上以激活菜单/点击按钮。这是访问 IE6 和 IE7 中的下拉菜单所必需的。

如果这只是在 IE6 中出现，我不会那么在意，但随着 IE7 更加兼容并且在市场上更具主导地位，我需要它才能工作，如果修复对两者都有效，那就太好了，如果没有，那么 IE7 就可以解决问题。

详细信息:

• 运行 Wordpress 3.1.3
• 从 Starkers 主题开始(从那里开始编辑)
• 使用 Wordpress 菜单，所以没有异常
• 使用 IE8.js (http://code.google.com/p/ie7-js/)，但仅修复了一些 IE6 菜单问题(没有此 JS 的 IE6 中的水平菜单损坏)

其他信息:

• 我试过为链接添加顶部和底部填充，但它对实际的选择框模型没有任何作用(因此我现在没有顶部和底部填充)。
• 我想知道我的下拉菜单设置是否奇怪或不正确。

编辑(更多信息):问题是，如果你 checkin chrome 或类似的，主水平菜单工作正常。您不必将鼠标悬停在文本上即可让链接可点击。然而，在IE6和IE7中，这是不一样的。在 IE6 和 IE7 中，您必须将鼠标悬停在实际文本上才能显示下拉菜单。

无论如何，如果有人能提供一些见解，我们将不胜感激。

谢谢!

Answer 1

如果您在 IE 中使用开发人员工具，那么您会看到有两套样式....

#nav_wrap ul.menu > li a  and #nav_wrap ul.menu > li > a

这就是我为解决问题所做的工作:- 如果我取消选中/删除 #nav_wrap ul.menu > li > a 中的所有样式- 从 #nav_wrap ul.menu > li a

中删除 position:relative 和 height:40px

我不确定您是否需要这些类，但执行上述操作会使整个 block 可点击，而不仅仅是 IE7 中的文本。我还没有在 IE6 中测试过。