1

ASP.NETWebアプリケーションで8バージョンと以前のバージョンのIEブラウザーの両方をサポートする必要があります。ただし、IE8アドレスバーの[壊れたページ]ボタンをクリックして互換性ビューに切り替えると、メニューの背景画像がトリミングされ、2つのメニューの間に垂直方向のギャップがあり、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>

[表示]->[ソース]を選択し、生成されたHTMLを保存して、2つの結果を比較すると、唯一の違いは、上位（ "クライアントホーム"）ユーザーコントロールのプロパティにあります。

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

「互換性」バージョンでは、margin-topは-2ではなく-3pxです。

4

2 に答える 2

1

表示されているのは、ページのIE7レンダリングです。これは、明らかにいくつかの問題を引き起こします。問題のある要素に「zoom：1」、margins、「position：relative」を指定するなど、単純なCSSのトリック/ハックを使用して、これらの問題のほとんどを修正できるはずです。これらが失敗した場合（またはIE8を壊した場合）、IE7固有のCSSスタイルシートの作成を検討してください。テストを支援するために、必ずIE開発者ツールを使用してください。

より有用な情報はここにあります。

于 2011-03-09T23:32:23.227 に答える
1

または、IE7との互換性が必要ない場合は、値IE = 8のX-UA-Compatibleを使用して、ボタンを非表示にすることができます。

于 2011-03-25T02:35:02.363 に答える