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

更新：在仔细查看您的 css 之后，我认为您需要display: block将display: inline-block. display: block可能是导致初始垂直布局的原因，然后（我假设）某种 ASP.NET 注入菜单 javascript 正在修复它（因为您指定了 Orientiation="Horiztonal" ）。只是一个猜测。

于 2011-11-05T04:00:21.930 回答