IE8 兼容性视图破坏了 asp:menu
我需要让我的 ASP.NET Web 应用程序支持 IE 浏览器 8 及之前版本。但是，当我单击 IE8 地址栏上的“损坏的页面”按钮切换到兼容性视图时，菜单背景图像被裁剪，两个菜单之间存在垂直间隙，asp: 菜单栏和导航用户控件之间存在间隙在它之上。
常规 IE8 视图：
兼容性视图： 
每个菜单的一般格式是：
<asp:TableCell ID="tcFurnMenuSectls" runat="server">
<asp:Menu ID="menuFurnSectls" runat="server" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1"
Orientation="Horizontal"
CssClass="FurnMenuSectionals" StaticMenuItemStyle-ItemSpacing="0px"
DynamicMenuItemStyle-CssClass="FurnMenuDynamicItem"
StaticMenuItemStyle-CssClass="FurnMenuStaticItem"
DynamicHoverStyle-CssClass="FurnMenuDynamicItemHover"
DynamicVerticalOffset="0"
StaticHoverStyle-CssClass="FurnMenuStaticItemHoverSectls"
StaticEnableDefaultPopOutImage="false"
DynamicPopOutImageUrl="~/Images/AppMenu/menu_arrow_grey.gif" DynamicMenuItemStyle-VerticalPadding="2"
DisappearAfter="0" OnMenuItemClick="menuFurn_MenuItemClick">
<Items>
<asp:MenuItem Text="Sectionals " ImageUrl="~/Images/AppMenu/FurnMenuGradientTransparent.png" Selectable="false">
<asp:MenuItem Text="Options "
Value="Sectionals_Options" NavigateUrl="~/FurnMain.aspx?_page=OptsSectl&_title=SectionalOptions">
</asp:MenuItem>
<asp:MenuItem
Text="Latest deals "
Value="Sectionals_Deals"
NavigateUrl="~/FurnMain.aspx?_page=DealsSectl&_title=SectionalDeals"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</asp:TableCell>
如果我选择查看 ->源代码，保存生成的 HTML 并比较两个结果，唯一的区别在于上部（“客户端主页”）用户控件的属性：
<table id="topNavCtrl_menuTopNav" class="TopNavMenu topNavCtrl_menuTopNav_2" cellpadding="0" cellspacing="0" border="0" style="margin-top:-2px;">
在“兼容性”版本中，margin-top 为 -3px，而不是 -2。
I need to have my ASP.NET web application support both 8 and prior versions of the IE browser. However, when I click the "broken page" button on my IE8 address bar to switch to Compatibilty View, menu background images are cropped, there is a vertical gap between two menus and a gap between my asp:menu bar and a navigation user control above it.
Regular IE8 view:
Compatibility View:
The general format of each menu is:
<asp:TableCell ID="tcFurnMenuSectls" runat="server">
<asp:Menu ID="menuFurnSectls" runat="server" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1"
Orientation="Horizontal"
CssClass="FurnMenuSectionals" StaticMenuItemStyle-ItemSpacing="0px"
DynamicMenuItemStyle-CssClass="FurnMenuDynamicItem"
StaticMenuItemStyle-CssClass="FurnMenuStaticItem"
DynamicHoverStyle-CssClass="FurnMenuDynamicItemHover"
DynamicVerticalOffset="0"
StaticHoverStyle-CssClass="FurnMenuStaticItemHoverSectls"
StaticEnableDefaultPopOutImage="false"
DynamicPopOutImageUrl="~/Images/AppMenu/menu_arrow_grey.gif" DynamicMenuItemStyle-VerticalPadding="2"
DisappearAfter="0" OnMenuItemClick="menuFurn_MenuItemClick">
<Items>
<asp:MenuItem Text="Sectionals " ImageUrl="~/Images/AppMenu/FurnMenuGradientTransparent.png" Selectable="false">
<asp:MenuItem Text="Options "
Value="Sectionals_Options" NavigateUrl="~/FurnMain.aspx?_page=OptsSectl&_title=SectionalOptions">
</asp:MenuItem>
<asp:MenuItem
Text="Latest deals "
Value="Sectionals_Deals"
NavigateUrl="~/FurnMain.aspx?_page=DealsSectl&_title=SectionalDeals"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</asp:TableCell>
If I select View -> Source, save the generated HTML and compare the two results, the only difference is in a property of the upper ("Client Home") user control:
<table id="topNavCtrl_menuTopNav" class="TopNavMenu topNavCtrl_menuTopNav_2" cellpadding="0" cellspacing="0" border="0" style="margin-top:-2px;">
In the "compatibility" version, margin-top is -3px, instead of -2.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您看到的是 IE7 渲染的页面，这显然破坏了一些东西。您应该能够使用简单的 CSS 技巧/技巧来解决大多数这些问题，例如为有问题的元素指定“zoom: 1”、边距和“position:relative”。如果这些事情失败（或破坏 IE8），请考虑创建 IE7 特定的 CSS 样式表。请务必使用 IE 开发者工具 帮助测试。
更多有用的信息可以在此处找到。
What you see is IE7 rendering of the page, which obviously breaks a few things. You should be able to fix most of these issues using simple CSS tricks/hacks, such as specifying "zoom: 1", margins and "position:relative" for problematic elements. If those things fail (or break IE8), considering creating IE7 specific CSS stylesheet. Make sure to use IE Developer Tools to aid in testing.
More useful information can be found here.
或者，如果您不需要与 IE7 兼容，则可以通过使用 X-UA-Compatible 并将值 IE=8 来隐藏该按钮。
Or if you don't need compatiblity with IE7, you can hide the button by using X-UA-Compatible with the value IE=8.