简体繁体 English

IE7中CSS菜单的奇怪可见性问题

[英]Strange visibility issue with CSS menu in IE7

原文 2012-06-13 01:13:05 0 1 html/ css/ menu

I have a CSS-only menu (ie. no JS) that works great in all modern browsers, but has a weird bug in IE7. 我有一个仅CSS的菜单（即，没有JS），在所有现代浏览器中都很好用，但是在IE7中有一个奇怪的错误。 It doesn't work well at all in IE6, but we don't need to address that here. 它根本无法在IE6中正常运行，但我们无需在此解决。 The issue is as follows: 问题如下：

When you mouse over a menu option tab, the dropdown appears. 将鼠标悬停在菜单选项选项卡上时，将显示下拉列表。 When you mouse off that option, the dropdown disappears - and in IE7 only, the tab also disappears! 当您将鼠标悬停在该选项上时，下拉列表消失-仅在IE7中，该选项卡也消失！ The bit that gets me is this - the tab will reappear if you mouse over it again, or if you mouse over ANY OTHER TAB. 让我感到困惑的是-如果再次将鼠标悬停在该选项卡上，或者将鼠标悬停在任何其他选项卡上，则该选项卡将重新出现。 How is this even possible?! 这怎么可能？ A mouseover on another element making the original tab visible agin?? 将鼠标悬停在另一个元素上，可使原始选项卡重新可见？ The annoying thing is, it worked in the last incarnation of this website, and somehow in the new design, it's gotten broken. 令人讨厌的是，它在本网站的最后一个版本中起作用，而在新设计中，它以某种方式被破坏了。 I've tried comparing and can't work out what it is. 我已尝试比较，但无法弄清楚它是什么。

Here's a fiddle of the current broken version: http://jsfiddle.net/pXZLJ/1/ 这是当前损坏版本的小提琴： http : //jsfiddle.net/pXZLJ/1/

Here's one of the old working one: http://jsfiddle.net/43utK/ 这是旧的工作之一： http : //jsfiddle.net/43utK/

View these in IE7 to see the problem. 在IE7中查看这些内容以查看问题。 Help? 救命？ Thanks :) 谢谢：）

1 个解决方案

Try deleting this line in your css: .nrmenu * {position:relative} . 尝试在CSS中删除此行： .nrmenu * {position:relative} 。 It seems to fix things. 它似乎可以解决问题。

EDIT: As sarcastyx pointed out, it does seem to affect the dropdown menus. 编辑：正如sarcastyx所指出的，它似乎确实会影响下拉菜单。 So, add position:relative to .nrmenu li and dropdown menu appears again. 因此，添加position:relative对于.nrmenu li position:relative ， .nrmenu li再次出现下拉菜单。