"/> "/> -6ren">
个人中心
gpt4 book ai didi

asp.net - 带有母版页的 ASP.NET 菜单中的奇怪视觉工件

转载 作者：行者123 更新时间：2023-11-28 13:40:09 24 4
gpt4 key购买 nike

我想知道为什么我会得到这个奇怪的视觉伪像？

我有一个配置了母版页的 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/

24 4 0
文章推荐： css - 如何将网站的位置设置在窗口的中间/中心？
文章推荐： css - 有没有办法阻止 Visual Studio 2010 自动生成 CSS
文章推荐： javascript - 奇怪的 fadeIn() 和 fadeOut() 问题 jQuery
文章推荐： ios - 禁用文本字段触摸但仍接受编辑？