我想知道为什么我会得到这个奇怪的视觉伪像？
我有一个配置了母版页的 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;
}
发生的事情是，当页面在网络浏览器中加载时，我得到了垂直显示的菜单，就像它在这个屏幕截图上显示的那样:
http://i150.photobucket.com/albums/s99/dc2000_bucket/menu_bug.png
一瞬间它切换到我想要的方式 - 水平(上面链接中的顶部图片。)
有人可以告诉我我做错了什么以及如何解决吗？
最佳答案
在浏览器加载您的 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 注入(inject)菜单 javascript 正在修复它(因为您指定了 Orientiation="Horiztonal")。只是一个猜测。
关于asp.net - 带有母版页的 ASP.NET 菜单中的奇怪视觉工件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8018076/