asp:Menu 在 IE8/FireFox 下不正常显示子菜单的解决办法

在 Asp.Net 里用 Menu 控件,如果页面背景白色的,用 IE8 浏览感觉是无法展开子菜单。其实还是有展开的,只是一个白框,把页面背景设置了其他颜色就能看到。Menu 控件在 IE7 下没问题,FireFox 下也不行,反而 Opera 能正常显示。IE8 在趋于标准化的时候,显然是 Menu 控件不符合标准。

有三个解决办法,请参考:ASP.NET Menu and IE8 rendering white issue

1. 重写 z-index 属性:标准模式下 z-index 默认为 auto。

为<asp:Menu> 指定 <DynamicMenuStyle CssClass="IE8Fix" /> 节点,设置它的样式的 z-index 为一个较大的值。

这样在 IE8 下是解决了,但是 FireFox 下仍然不行。像其他的 Safari、Chrome 等浏览器也无效果。

2. 在 IE8 下强制以 IE7 兼容模式解析

在 <head> 中加入一行:

<meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>

这是一个针对 IE8 的较消极的解决办法,对其他浏览器根本就是回避。

3. 让 Menu 控件生成的 HTML/CSS/JS 标准化

这要用到  CSS Friendly adapter 来渲染你的 Menu 控件,具体步骤如下:

1. 从 http://www.codeplex.com/cssfriendly 下载 CSSFriendly.dll 和 CSSFriendlyAdapters.browser 文件.
2. 项目中添加对 CSSFriendly.dll 的引用,比如把 CSSFriendly.dll 直接拷到 WebSite 项目的 bin 目录中就行.
3. 在 Web 项目中加上一个特殊目录 App_Browsers,然后把 CSSFriendlyAdapters.browser 文件拷入其中.

项目上右键里选 Add ASP.NET Folder 里选择 App_Browsers 就能创建 App_Browsers 目录。

其他的事情就不用你操心了,而且这个 CSSFrendly 还能帮你渲染其他的 List 控件,如 TreeView、DetailsView 等。

我原本对第三种方法寄予了厚望,可是试了下,在默认样式下,子菜单在各种浏览器是能显示出来,但十分难看。垂直菜单的子菜单与上级菜单重叠了,水平菜单也是第一级菜单粘在一起。看了 CSSFriendly 的例子是再用样式去手动控制菜单,实际用起来也有点麻烦。

这个 CSSFriendly 的最新版还是 Mar 5 2007 的,没人维护了,当时解决的是在 ASP.NET 2.0 下的问题,也许对于现在 ASP.NET 3.5 不那么奏效了。

不过看 CSSFrendly 的实现,倒是跟上了潮流,用 <div><li> 代替了默认的用 <table> 来生成菜单。我想实际项目中,我们用这种富控件的机会还是比较少,毕竟有许多像 JQuery 那样丰富且高效率的控件。

本文链接 https://yanbin.blog/aspmenu-ie8firefox-abnormal/, 来自 隔叶黄莺 Yanbin Blog

[版权声明] Creative Commons License 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。

Subscribe
Notify of
guest

1 Comment
Inline Feedbacks
View all comments
lexus
lexus
12 years ago

太感谢了 我被这问题卡了好久 谢谢兄弟!!!