Grails UI 菜单在 IE 中的不稳定行为

Question

我正在使用 GRAILS UI (1.2-SNAPSHOT)，它是 YUI 菜单栏 (YUI 2.7.0.1) 的实现。我在 IE 中看到不稳定的鼠标悬停行为（Firefox 没问题）。当我将鼠标悬停在带有子菜单的菜单项上时，它将显示。当我尝试将鼠标悬停在子菜单上时，在我单击之前子菜单就消失了。这种情况发生的模式我还没有完全弄清楚。通常，当我第一次选择菜单时，这很好，但如果我将菜单移回到菜单项，子菜单就会开始显示此行为。通过单击并按住鼠标按钮，我通常可以让子菜单保留下来。

我已经尝试过各种配置，例如 keepopen 和 automenudisplay ，但它们似乎并没有改变行为。我还没有看到太多关于此的帖子。但我也没有在 UI 插件中看到菜单记录。如果 UI 菜单还没有准备好进入黄金时段或者我错过了其他东西，我真的可以使用一些反馈。我以前很少使用过 AJAX。

下面是我使用过的添加选项的代码，但没有产生积极的影响。

<gui:menubar id='menubar' renderTo='mainmenu' autosubmenudisplay="false" shadow="true" keepopen="true">
<gui:menuitem url="/esmzone">Home</gui:menuitem>
        <gui:submenu label='Profile'>
            <gui:menuitem url="${createLink(controller:'memberProfile', action:'view')}">View</gui:menuitem>
            <gui:menuitem url="${createLink(controller:'memberProfile', action:'profile')}">Edit</gui:menuitem>
            <gui:menuitem url="${createLink(controller:'user', action:'account')}">Settings</gui:menuitem>
            <gui:menuitem url="#">Subscription</gui:menuitem>
        </gui:submenu>

这是插件生成的代码：

<script>
YAHOO.util.Event.onDOMReady(function() {
    GRAILSUI.menubar = new YAHOO.widget.MenuBar("menubar_div", {'autosubmenudisplay':  false,
'shadow': true,
'keepopen': true});
    GRAILSUI.menubar.render('mainmenu');
});
</script>

Answer 1

我通过研究 YUI 库在这方面取得了一些进展。 IE7 存在一个已记录的错误。显然 grails-ui 插件没有解决这个问题。我正在使用 IE8 进行测试，但我认为它仍然存在。

http://developer.yahoo.com/yui/menu/#knownissues

看来您应该将 bd 类的 Zoom 属性设置为 1 (zoom:1)。
我将以下代码添加到我的样式表中

div.yuimenubar .bd {
zoom: 1;
}

，它似乎有帮助。我在 Firefox 中没有看到任何副作用，但我没有动态检查浏览器的版本，因为我需要破解生成 YUI javascript 的代码并

if (YAHOO.env.ua.ie === 7) {
YAHOO.util.Dom.addClass(document.body, "ie7");
}

在 render() 调用之后放入。然后，您可以使用 IE7（可能 >=7）样式来代替我添加的样式。

雅虎网站对此是这样说的：

以下应用
“zoom:1”设置“hasLayout”
属性为“true”并防止
MenuBar 的第一层子菜单
当鼠标移动时隐藏
从 MenuBar 中的项目到
IE 7 中的子菜单。
有关“hasLayout”属性的更多信息：
http://msdn.microsoft.com/en-us /library/ms533776(VS.85).aspx