1

我需要让我的 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。

4

2 回答 2

1

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

于 2011-03-25T02:35:02.363 回答
1

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

更多有用的信息可以在这里找到。

于 2011-03-09T23:32:23.227 回答