IE 中的 Grails UI Menu flakey 行为

Question

我正在使用 GRAILS UI (1.2-SNAPSHOT)，它是 YUI 菜单栏 (YUI 2.7.0.1) 的实现。我在 IE 中看到了 flakey mouseover 行为（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" 属性为“真”并防止 MenuBar 的第一层子菜单 从鼠标移动时隐藏 从 MenuBar 中的项目到 IE 7 中的子菜单。 有关“hasLayout”属性的更多信息： http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx