IE8兼容性视图打破了asp：menu

Question

我需要让我的ASP.NET Web应用程序支持IE浏览器的8个版本和早期版本。但是，当我单击IE8地址栏上的“断页”按钮切换到Compatibilty View时，菜单背景图像被裁剪，两个菜单之间存在垂直间隙，我的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&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>

如果我选择查看 - ＆gt; 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。

Answer 1

你看到的是页面的IE7渲染，这显然打破了一些事情。您应该能够使用简单的CSS技巧/黑客来解决大多数问题，例如为有问题的元素指定“zoom：1”，margin和“position：relative”。如果那些事情失败（或打破IE8），考虑创建IE7特定的CSS样式表。请务必使用IE Developer Tools来帮助进行测试。

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

Answer 2

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