Странный визуальный артефакт в меню ASP.NET с главной страницей - PullRequest
Новая
       22

Странный визуальный артефакт в меню ASP.NET с главной страницей

1 голос
/ 05 ноября 2011

Мне было интересно, почему я получаю этот странный визуальный артефакт?

У меня есть проект веб-приложения ASP.NET, в котором настроена главная страница.Главная страница имеет верхнее меню, например, так: 

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
  <Items>
    <asp:MenuItem NavigateUrl="~/ReportPage.aspx" Text="<%$ Resources:Master, Menu_Reports %>"/>
    <asp:MenuItem NavigateUrl="~/ConfigurePage.aspx" Text="<%$ Resources:Master, Menu_Configure %>"/>
    <asp:MenuItem NavigateUrl="~/AboutPage.aspx" Text="<%$ Resources:Master, Menu_About %>"/>
  </Items>
 </asp:Menu>

и стили выглядят следующим образом: 

div.menu
 {
     padding: 4px 0px 4px 8px;
 }
div.menu ul
 {
     list-style: none;
     margin: 0px;
     padding: 0px;
     width: auto;
 }
 div.menu ul li a, div.menu ul li a:visited
 {
     background-image: url("../Graphics/btngradb.png");
     border: 0px solid #bc8b28;
     color: #ececec;
     display: block;
     line-height: 1.35em;
     padding: 4px 20px;
     text-decoration: none;
     white-space: nowrap;
     margin-right: 4px;
     font-size: 14px;
     text-shadow: 1px 1px 1px #7a550e;
 }
 div.menu ul li a:hover
 {
     background-image: url("../Graphics/btngradg.png");
     border-bottom-color: #719b14;
     color: #ececec;
     text-decoration: none;
 }
 div.menu ul li a:active
 {
     background-color: #a1ca56;
     color: #000000;
     text-decoration: none;
 }

Что происходит, когда страница загружается в веб-браузеременю отображается вертикально, как показано на этом снимке экрана:

http://i150.photobucket.com/albums/s99/dc2000_bucket/menu_bug.png

И через долю секунды оно переключается на то, что я хочу, - горизонтально (верхнее изображение в ссылке выше.)

Может кто-нибудь сказать мне, что я не делаю правильно и как это исправить?

1 Ответ

2 голосов
/ 05 ноября 2011

Звучит так, как будто браузер загружает ваш css. Это какая-то задержка.

Где ваша таблица стилей / CSS находится в разметке страницы?

Вы должны попытаться поместить его как можно выше в теге <head>, в идеале сразу после <title></title> и перед любыми тегами <script>.

http://developer.yahoo.com/performance/rules.html#css_top

ОБНОВЛЕНИЕ: посмотрев немного ближе к вашему css, я думаю, вам нужно изменить display: block на display: inline-block. display: block вероятно, что является причиной первоначальной вертикальной компоновки, тогда (я предполагаю) какой-то ASP.NET-инжектированный javascript меню исправляет это (так как вы указали Orientiation = "Horiztonal"). Просто предположение.

...