解决ASP.NET下的MENU控件在IE8中不显示的问题

最新推荐文章于 2013-03-08 10:28:23 发布

Snowdust

最新推荐文章于 2013-03-08 10:28:23 发布

阅读量3.1k

点赞数

分类专栏： DotNET 文章标签： menu asp.net ie standards server website

DotNET 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

原地址：http://blogs.msdn.com/giorgio/archive/2009/02/01/asp-net-menu-and-ie8-rendering-white-issue.aspx

ASP.NET Menu and IE8 rendering white issue

If you are using the ASP.NET Menu control, you might encounter under certain circumstances an issue where the menu appears as a white box in IE8 Standards Mode.

What IE8 is doing IS correct (by design), in the sense that in Standards mode IE8 is following the standards. Specifically, (element).currentStyle.zIndex returns "auto" in Standards mode when zindex has not been set. The ASP.NET Menu control assumes a different value.

I’d like to suggest a few possible workarounds to solve quickly the issue (note, you can use either one of them, depending on your scenario):

Overriding the z-index property
Using CSS Friendly Control Adapters
Adding the IE7 META tag to the website

1 – Overriding the z-index property

You can manually set the z-index property of the Menu items using the DynamicMenuStyle property of the asp:Menu control (note lines 9-14 and 20). Full source code is:

 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
        body 
        { 
            background-color: Silver; 
        } 
    </style> 
    <style type="text/css"> 
        .IE8Fix 
        { 
            z-index: 100; 
        } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"> 
            <DynamicMenuStyle CssClass="IE8Fix" /> 
        </asp:Menu> 
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> 
    </div> 
    </form> 
</body> 
 

This solution is the least intrusive, but it require a page-by-page update (unless your menu is a Master Page).

2 – Using CSS Friendly Control Adapters

Thanks to Tim for this solution. In order to add the CSS Friendly adapter to your project, you will need to:

Download CSSFriendly.dll and CSSFriendlyAdapters.browser from here.
Inside your project, add a reference to CSSFriendly.dll.
Add the special folder App_Browsers to your project, and copy the file CSSFriendlyAdapters.browser.

The CSS Friendly Control Adapters will render all the listed controls (Menu, TreeView, DetailsView, …) using CSS and HTML standards.

3 – Add the IE7 META tag to the project

By default, Windows Internet Explorer 8 will attempt to display content using its most standards-compliant mode, the IE8 Standards mode. However you can still switch to the IE7 Standards mode adding a particular META TAG to the head of the page:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
     
    <title>IE8 ASP.NET Fix</title> 
</head> 
<body> 
 

Using the tag, the website in IE8 will look and work in the same way as it does in IE7.

You can do a “live test” of this feature without the need to modify the page, using the new IE8 Developer Toolbar (press F12 to open the toolbar, and switch the Document Mode to IE7 Standards).

Note that you can set up the META tag at page level, at web.config level, or in IIS, or in Apache, …

Snowdust

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决ASP.NET下的MENU控件在IE8中不显示的问题

原地址：http://blogs.msdn.com/giorgio/archive/2009/02/01/asp-net-menu-and-ie8-rendering-white-issue.aspxASP.NET Menu and IE8 rendering white issue If you are using the ASP.NET Menu control, you might
复制链接

扫一扫

专栏目录