Совместимость IE8 View ломает asp: меню - PullRequest
Новая
       46

Совместимость IE8 View ломает asp: меню

1 голос
/ 10 марта 2011

Мне нужно, чтобы мое веб-приложение ASP.NET поддерживало как 8, так и предыдущие версии браузера IE.Однако, когда я нажимаю кнопку «неработающая страница» в моей адресной строке IE8, чтобы переключиться в режим просмотра совместимости, фоновые изображения меню обрезаются, между двумя меню появляется вертикальный разрыв, а между строкой меню asp: и пользовательским элементом управления навигацией возникает разрыв.над ним.

Обычный вид IE8:

enter image description here

Вид совместимости: enter image description here

Общий формат каждого меню: 

<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 и сравним два результата, единственное отличие заключается в свойстве верхнего пользовательского элемента управления («Клиентский дом»): 

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

В версии «совместимость» margin-top равен -3px вместо -2.

Ответы [ 2 ]

1 голос
/ 25 марта 2011

Или, если вам не нужна совместимость с IE7, вы можете скрыть кнопку, используя X-UA-Compatible со значением IE = 8.

1 голос
/ 10 марта 2011

То, что вы видите, - это рендеринг страницы в IE7, который явно ломает некоторые вещи.Вы должны быть в состоянии решить большинство из этих проблем, используя простые приемы и приемы CSS, такие как указание «zoom: 1», поля и «position :lative» для проблемных элементов.Если эти вещи потерпят неудачу (или сломают IE8), подумайте о создании конкретной таблицы стилей CSS для IE7.Обязательно используйте IE Developer Tools для помощи в тестировании.

Более полезную информацию можно найти здесь .

...