IE8 兼容性视图中断 asp:menu答案

【问题标题】：IE8 Compatibility View breaks asp:menuIE8 兼容性视图中断 asp:menu
【发布时间】：2011-03-09 22:25:05
【问题描述】：

我需要让我的 ASP.NET Web 应用程序同时支持 IE 浏览器的 8 和更早版本。但是，当我单击 IE8 地址栏上的“断页”按钮切换到兼容性视图时，菜单背景图像被裁剪，两个菜单之间存在垂直间隙，并且我的 asp:menu 栏和导航用户控件之间存在间隙在它上面。

常规 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&nbsp;&nbsp;&nbsp;&nbsp;" ImageUrl="~/Images/AppMenu/FurnMenuGradientTransparent.png" Selectable="false">
                <asp:MenuItem Text="Options&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                    Value="Sectionals_Options" NavigateUrl="~/FurnMain.aspx?_page=OptsSectl&_title=SectionalOptions">
                </asp:MenuItem>
                <asp:MenuItem
                    Text="Latest deals&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                    Value="Sectionals_Deals"
                    NavigateUrl="~/FurnMain.aspx?_page=DealsSectl&_title=SectionalDeals"></asp:MenuItem>
            </asp:MenuItem>
        </Items>
    </asp:Menu>
</asp:TableCell>

如果我选择 View -> Source，保存生成的 HTML 并比较两个结果，唯一的区别在于上层（“Client Home”）用户控件的一个属性：

<table id="topNavCtrl_menuTopNav" class="TopNavMenu topNavCtrl_menuTopNav_2" cellpadding="0" cellspacing="0" border="0" style="margin-top:-2px;">

在“兼容性”版本中，margin-top 是 -3px，而不是 -2。

【问题讨论】：

标签： asp.net ie8-compatibility-mode aspmenu

【解决方案1】：

您看到的是页面的 IE7 渲染，这显然破坏了一些东西。您应该能够使用简单的 CSS 技巧/hacks 来解决大部分问题，例如为有问题的元素指定“缩放：1”、边距和“位置：相对”。如果这些事情失败（或破坏 IE8），考虑创建 IE7 特定的 CSS 样式表。确保使用IE Developer Tools 来帮助测试。

更多有用信息可以在here找到。

【讨论】：

【解决方案2】：

或者，如果您不需要与 IE7 兼容，您可以使用值为 IE=8 的 X-UA-Compatible 隐藏按钮。

【讨论】：