1

なぜこの奇妙な視覚的アーティファクトが得られるのだろうと思っていました。

マスター ページで構成された Web アプリ 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;
 }

何が起こるかというと、ページが Web ブラウザーに読み込まれると、この画面グラブに示されているように、メニューが垂直に表示されます。

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

そして一瞬の後、それは私が望む方法に切り替わります-水平方向（上記のリンクの上部の写真）。

誰かが私が正しく行っていないことと、それを修正する方法を教えてもらえますか?

4

1 に答える 1

2

ブラウザが CSS をロードしている間、何らかの遅延があるようです。

ページ マークアップ内のスタイルシート/CSS はどこにありますか?

タグ内のできるだけ「高い位置」に<head>、理想的にはタグの直後<title></title>と直前に配置するようにして<script>ください。

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

更新:display: block CSS をもう少し詳しく見てから、 を に変更する必要があると思いますdisplay: inline-block。display: block初期の垂直レイアウトの原因である可能性が高く、(私は推測しています) ASP.NET 注入されたメニュー javascript のいくつかの並べ替えがそれを修正しています (Orientation="Horiztonal" が指定されているため)。推測です。

于 2011-11-05T04:00:21.930 に答える