在开发Web应用程序时,浏览器兼容性是一个不可忽视的问题。特别是当涉及到ASP.NET 控件时,不同的浏览器可能会因为对CSS属性的不同解释而导致显示问题。例如,IE8浏览器中的ASP菜单控件就存在这样的问题。经过微软的系统测试,发现问题并不在于IE8本身,而是ASP菜单控件对CSS属性z-index的值假设错误。幸运的是,这个问题可以通过几种方法来解决。
微软在IE8发布后不久就发布了一个热修复补丁(Hotfix)来解决这个问题。这个补丁适用于Windows XP和Windows Vista操作系统。相关的知识库(Knowledge Base)可以在以下网址找到: 补丁可以从以下位置下载: 这个补丁适用于基于Framework 2.0构建的应用程序。对于后续版本的Framework,建议联系微软支持以获取这个热修复补丁。
由于问题是由于错误的z-index假设造成的,可以将动态项目的z-index设置为比所有控件的z-index更高的值。这将解决ASP菜单控件的问题。为此,在CSS文件中添加一个CSS类:
.DynamicItemZIndex {
z-index: 1000;
}
然后在ASP菜单控件的skin文件中使用这个CSS类作为DynamicMenuStyle-CssClass:
<asp:Menu runat="server" DynamicMenuStyle-CssClass="DynamicItemZIndex">
<!-- some other properties -->
</asp:Menu>
这种方法的优点是不需要在任何浏览器或控件级别功能上妥协。此外,使用这种技术不会引入任何外部资源。
IE6和IE7不会对ASP菜单控件的动态项目渲染造成问题。因此,另一种解决方案是在IE8中添加一个Meta标签来模拟IE7。这也将解决问题。为此,在页面级别添加一个Meta标签以模拟IE7:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server">
<!-- some properties -->
</asp:Menu>
</div>
</form>
</body>
</html>
这个Meta标签也可以在web.config文件的应用级别添加:
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>