2011-11-05 5 views
1

왜이 이상한 시각적 인공물이 나는지 궁금합니다.마스터 페이지가있는 ASP.NET 메뉴의 이상한 시각적 인공물

마스터 페이지로 구성된 웹 응용 프로그램 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

그리고 분할 두 번째는 내가 그것을 할 방법 방식으로 전환 후 : 그것은이 화면 잡아에 표시된 것처럼

내가 옳지 않은 일과 해결 방법을 누군가가 말해 줄 수 있습니까?

+0

아래의 답변 외에도 CSS 선택기의 속도를 높이는 것도 도움이 될 수 있습니다. 태그와 클래스를 결합하는 것은 클래스를 사용하는 것보다 느립니다. – jwiscarson

+0

BTW, "ASP NET"이 아니라 "ASP.NET"입니다. –

+0

죄송합니다, 예. 점을 잊어 버렸습니다 ... @ jwiscarson 나를 정말 괴롭히는 이유는 메뉴가 처음에는 스타일이 있지만 잘못된 방향으로 표시되는 것입니다. BTW, 아래의 조언은 도움이되지 않았다 .... :( – ahmd0

답변

2

브라우저에 CSS가로드되는 동안 지연이 발생하는 것처럼 들립니다.

스타일 시트/CSS는 페이지 마크 업에서 어디에 있습니까?

<title></title> 바로 뒤에 그리고 <script> 태그 바로 앞에서는 가능한 한 <head> 태그에 "하이 - 업"으로 배치해야합니다.

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

UPDATE : 조금 더 가까이 CSS를보고 후, 나는 당신이 display: blockdisplay: inline-block에를 변경할 필요가 있다고 생각합니다. display: block은 초기 세로 레이아웃을 유발할 가능성이 높습니다. 그런 다음 ASP.NET 정렬 메뉴 자바 스크립트가 일종의 Orientaliation = "Horiztonal"을 지정했기 때문에이를 수정하고 있다고 가정합니다. 그냥 추측.

+0

너는 알고있다. 나는 외부 CSS 파일을 포함하는 CSS 스타일 태그를 확인했다. 태그 바로 뒤에 오는 것이었다 ... – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/670017/">ahmd0</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">인라인 블록 변화는 단지 처음에 (또는 수직으로) 잘못 표시된 메뉴를 더 짧게 만들었지 만 그 짧은 순간에도 여전히 잘못된 방향으로 표시됩니다 .... – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/670017/">ahmd0</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4319274062" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">관련 문제</div> <ul class="relative_list"> <li> 1. <a href="http://ko.voidcc.com/question/p-rvlvxtar-cx.html" target="_blank" title="신비한 깜박임 시각적 인공물"> 신비한 깜박임 시각적 인공물 </a> </li> <li> 2. <a href="http://ko.voidcc.com/question/p-vgtfwxig-g.html" target="_blank" title="ASP.NET 마스터 페이지가있는 이벤트 및 대리자"> ASP.NET 마스터 페이지가있는 이벤트 및 대리자 </a> </li> <li> 3. <a href="http://ko.voidcc.com/question/p-dnffkfwr-bh.html" target="_blank" title="마스터 페이지가있는 ASP.NET 양식의 URL 변경"> 마스터 페이지가있는 ASP.NET 양식의 URL 변경 </a> </li> <li> 4. <a href="http://ko.voidcc.com/question/p-fknbttoa-bu.html" target="_blank" title="ASP.NET 페이지의 CSS 파일 마스터 페이지가있는 MVC"> ASP.NET 페이지의 CSS 파일 마스터 페이지가있는 MVC </a> </li> <li> 5. <a href="http://ko.voidcc.com/question/p-rmktafwq-en.html" target="_blank" title="마스터 페이지가있는 웹 메서드 사용"> 마스터 페이지가있는 웹 메서드 사용 </a> </li> <li> 6. <a href="http://ko.voidcc.com/question/p-ewwkklai-ck.html" target="_blank" title="내 푸리에 변환의 이상한 인공물"> 내 푸리에 변환의 이상한 인공물 </a> </li> <li> 7. <a href="http://ko.voidcc.com/question/p-bpouedkl-kg.html" target="_blank" title="OpenGL의 이상한 사각형 조명 인공물"> OpenGL의 이상한 사각형 조명 인공물 </a> </li> <li> 8. <a href="http://ko.voidcc.com/question/p-vntnofzm-dy.html" target="_blank" title="마스터 및 컨텐트 페이지가있는 viewstate"> 마스터 및 컨텐트 페이지가있는 viewstate </a> </li> <li> 9. <a href="http://ko.voidcc.com/question/p-froknvqf-kq.html" target="_blank" title="마스터 페이지가있는 asp.net의 세션 시간 초과"> 마스터 페이지가있는 asp.net의 세션 시간 초과 </a> </li> <li> 10. <a href="http://ko.voidcc.com/question/p-epuqwaxy-co.html" target="_blank" title="마스터 페이지없이 asp.net 응용 프로그램의 글로벌 시각적 ID 수정"> 마스터 페이지없이 asp.net 응용 프로그램의 글로벌 시각적 ID 수정 </a> </li> <li> 11. <a href="http://ko.voidcc.com/question/p-nbtodyeo-c.html" target="_blank" title="마스터 페이지가없는 ASP.NET의 시각적 상속"> 마스터 페이지가없는 ASP.NET의 시각적 상속 </a> </li> <li> 12. <a href="http://ko.voidcc.com/question/p-axbmeadn-ds.html" target="_blank" title="웹 키트에있는 이상한 박스 섀도우 인공물"> 웹 키트에있는 이상한 박스 섀도우 인공물 </a> </li> <li> 13. <a href="http://ko.voidcc.com/question/p-zoqmwpig-hu.html" target="_blank" title="<allow users = "*"/> 페이지가있는 이상한 동작"> <allow users = "*"/> 페이지가있는 이상한 동작 </a> </li> <li> 14. <a href="http://ko.voidcc.com/question/p-ykqnxgcc-ep.html" target="_blank" title="게시 용 인공물 만들기 - 수출용 인공물"> 게시 용 인공물 만들기 - 수출용 인공물 </a> </li> <li> 15. <a href="http://ko.voidcc.com/question/p-snypzwjp-ea.html" target="_blank" title="인공물 이전"> 인공물 이전 </a> </li> <li> 16. <a href="http://ko.voidcc.com/question/p-fquynyjy-ea.html" target="_blank" title="은 인공물"> 은 인공물 </a> </li> <li> 17. <a href="http://ko.voidcc.com/question/p-yjqlfeqq-hs.html" target="_blank" title="css3 애니메이션 인공물"> css3 애니메이션 인공물 </a> </li> <li> 18. <a href="http://ko.voidcc.com/question/p-dgcolnsg-r.html" target="_blank" title="ASP.NET 마스터 페이지 및 컨테이너"> ASP.NET 마스터 페이지 및 컨테이너 </a> </li> <li> 19. <a href="http://ko.voidcc.com/question/p-comccgly-do.html" target="_blank" title="동적 기본 페이지가있는 ASP.NET aspx가 VS의 디자인 탭에 표시되지 않습니다"> 동적 기본 페이지가있는 ASP.NET aspx가 VS의 디자인 탭에 표시되지 않습니다 </a> </li> <li> 20. <a href="http://ko.voidcc.com/question/p-uwmulqcz-c.html" target="_blank" title="마스터 페이지가있는 양식 runat = server를 사용하는 데 문제가 있습니까?"> 마스터 페이지가있는 양식 runat = server를 사용하는 데 문제가 있습니까? </a> </li> <li> 21. <a href="http://ko.voidcc.com/question/p-bhfetpnk-kt.html" target="_blank" title="중첩 된 마스터 페이지가있는 콘텐츠 페이지에서 컨트롤에 액세스"> 중첩 된 마스터 페이지가있는 콘텐츠 페이지에서 컨트롤에 액세스 </a> </li> <li> 22. <a href="http://ko.voidcc.com/question/p-gwsjdfty-ev.html" target="_blank" title="빔 시각적 키 입력 이상한 행동"> 빔 시각적 키 입력 이상한 행동 </a> </li> <li> 23. <a href="http://ko.voidcc.com/question/p-uktnnrhl-dp.html" target="_blank" title="asp.net 용 IE 및 Mozilla의 플래시 마스터 페이지 및 컨텐츠 페이지가있는 페이지"> asp.net 용 IE 및 Mozilla의 플래시 마스터 페이지 및 컨텐츠 페이지가있는 페이지 </a> </li> <li> 24. <a href="http://ko.voidcc.com/question/p-xlzesjfi-dr.html" target="_blank" title="ViewModel CRUD 페이지가있는 ASP.NET MVC3 엔터티"> ViewModel CRUD 페이지가있는 ASP.NET MVC3 엔터티 </a> </li> <li> 25. <a href="http://ko.voidcc.com/question/p-prqjvnay-v.html" target="_blank" title="ASP.NET 마스터 페이지와 jQuery를"> ASP.NET 마스터 페이지와 jQuery를 </a> </li> <li> 26. <a href="http://ko.voidcc.com/question/p-gbsnkvej-ee.html" target="_blank" title="ASP.Net 마스터 페이지로 작업"> ASP.Net 마스터 페이지로 작업 </a> </li> <li> 27. <a href="http://ko.voidcc.com/question/p-pmtipcod-a.html" target="_blank" title="마스터 페이지 ASP.NET"> 마스터 페이지 ASP.NET </a> </li> <li> 28. <a href="http://ko.voidcc.com/question/p-zzoakcpj-n.html" target="_blank" title="ASP.NET MVC 마스터 페이지"> ASP.NET MVC 마스터 페이지 </a> </li> <li> 29. <a href="http://ko.voidcc.com/question/p-ggewlnqt-en.html" target="_blank" title="Asp.Net 마스터 페이지보기 모델"> Asp.Net 마스터 페이지보기 모델 </a> </li> <li> 30. <a href="http://ko.voidcc.com/question/p-mzfvrqnd-bh.html" target="_blank" title="상태 ASP.net 마스터 페이지"> 상태 ASP.net 마스터 페이지 </a> </li> </ul> </div> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3534119089"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img2.voidcc.com/voidso/script/side.js?t=1652515422614"></script> <script type="text/javascript" src="http://img2.voidcc.com/voidso/plugin/highlight/highlight.pack.js"></script> <link href="http://img2.voidcc.com/voidso/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- VOIDCC问答侧边栏广告 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3862022848" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> 최근 질문 </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://ko.voidcc.com/question/p-zqqnaiqd-xx.html" target="_blank" title="희소 DIA 행렬을 만든 다음 열을 변경하십시오."> 희소 DIA 행렬을 만든 다음 열을 변경하십시오. </a> </li> <li class="side_article_list_item"> 2. <a href="http://ko.voidcc.com/question/p-ydwgyqsx-yc.html" target="_blank" title="프롬프트에서 사용자 입력을 표시하는 자바 스크립트"> 프롬프트에서 사용자 입력을 표시하는 자바 스크립트 </a> </li> <li class="side_article_list_item"> 3. <a href="http://ko.voidcc.com/question/p-evjtvogi-yb.html" target="_blank" title="오류 : 호출이 cargaison 할 :: cargaison()"> 오류 : 호출이 cargaison 할 :: cargaison() </a> </li> <li class="side_article_list_item"> 4. <a href="http://ko.voidcc.com/question/p-fwwqvfzc-xz.html" target="_blank" title="netCDF4 파일에 병렬 저장하는 파이썬 다중 처리"> netCDF4 파일에 병렬 저장하는 파이썬 다중 처리 </a> </li> <li class="side_article_list_item"> 5. <a href="http://ko.voidcc.com/question/p-uvmrwiyv-xo.html" target="_blank" title="Bash - 한 쌍당 매개 변수"> Bash - 한 쌍당 매개 변수 </a> </li> <li class="side_article_list_item"> 6. <a href="http://ko.voidcc.com/question/p-gnibenld-xo.html" target="_blank" title="국경 스타일 점차적으로 CSS를 확대"> 국경 스타일 점차적으로 CSS를 확대 </a> </li> <li class="side_article_list_item"> 7. <a href="http://ko.voidcc.com/question/p-hqzhtdrn-xt.html" target="_blank" title="소스에서 Raspbian 건물 ncurses 및 vim"> 소스에서 Raspbian 건물 ncurses 및 vim </a> </li> <li class="side_article_list_item"> 8. <a href="http://ko.voidcc.com/question/p-atwsarkw-xs.html" target="_blank" title="CONSOLE.LOG 인쇄는 reactjs/mobx 프로젝트에서 작동하지 않습니다"> CONSOLE.LOG 인쇄는 reactjs/mobx 프로젝트에서 작동하지 않습니다 </a> </li> <li class="side_article_list_item"> 9. <a href="http://ko.voidcc.com/question/p-cnjcfmcr-xu.html" target="_blank" title="루비 레일 오류 설명 SASS"> 루비 레일 오류 설명 SASS </a> </li> <li class="side_article_list_item"> 10. <a href="http://ko.voidcc.com/question/p-qhyyfeqb-xp.html" target="_blank" title="python3 sched : run after events()"> python3 sched : run after events() </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> 관련 문제</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://ko.voidcc.com/question/p-rvlvxtar-cx.html" target="_blank" title="신비한 깜박임 시각적 인공물"> 신비한 깜박임 시각적 인공물 </a> </li> <li class="side_article_list_item"> 2. <a href="http://ko.voidcc.com/question/p-vgtfwxig-g.html" target="_blank" title="ASP.NET 마스터 페이지가있는 이벤트 및 대리자"> ASP.NET 마스터 페이지가있는 이벤트 및 대리자 </a> </li> <li class="side_article_list_item"> 3. <a href="http://ko.voidcc.com/question/p-dnffkfwr-bh.html" target="_blank" title="마스터 페이지가있는 ASP.NET 양식의 URL 변경"> 마스터 페이지가있는 ASP.NET 양식의 URL 변경 </a> </li> <li class="side_article_list_item"> 4. <a href="http://ko.voidcc.com/question/p-fknbttoa-bu.html" target="_blank" title="ASP.NET 페이지의 CSS 파일 마스터 페이지가있는 MVC"> ASP.NET 페이지의 CSS 파일 마스터 페이지가있는 MVC </a> </li> <li class="side_article_list_item"> 5. <a href="http://ko.voidcc.com/question/p-rmktafwq-en.html" target="_blank" title="마스터 페이지가있는 웹 메서드 사용"> 마스터 페이지가있는 웹 메서드 사용 </a> </li> <li class="side_article_list_item"> 6. <a href="http://ko.voidcc.com/question/p-ewwkklai-ck.html" target="_blank" title="내 푸리에 변환의 이상한 인공물"> 내 푸리에 변환의 이상한 인공물 </a> </li> <li class="side_article_list_item"> 7. <a href="http://ko.voidcc.com/question/p-bpouedkl-kg.html" target="_blank" title="OpenGL의 이상한 사각형 조명 인공물"> OpenGL의 이상한 사각형 조명 인공물 </a> </li> <li class="side_article_list_item"> 8. <a href="http://ko.voidcc.com/question/p-vntnofzm-dy.html" target="_blank" title="마스터 및 컨텐트 페이지가있는 viewstate"> 마스터 및 컨텐트 페이지가있는 viewstate </a> </li> <li class="side_article_list_item"> 9. <a href="http://ko.voidcc.com/question/p-froknvqf-kq.html" target="_blank" title="마스터 페이지가있는 asp.net의 세션 시간 초과"> 마스터 페이지가있는 asp.net의 세션 시간 초과 </a> </li> <li class="side_article_list_item"> 10. <a href="http://ko.voidcc.com/question/p-epuqwaxy-co.html" target="_blank" title="마스터 페이지없이 asp.net 응용 프로그램의 글로벌 시각적 ID 수정"> 마스터 페이지없이 asp.net 응용 프로그램의 글로벌 시각적 ID 수정 </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div><!-- wrap end--> <!-- footer --> <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://ko.voidcc.com/contact">문의하기</a></li> <li>© 2020 KO.VOIDCC.COM</li> <li><a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备13005482号-13</a></li> <li><script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1280098168&web_id=1280098168"></script></li> <li><a href="http://cn.voidcc.com/" target="_blank" title="程序问答园区">简体中文</a></li> <li><a href="http://hk.voidcc.com/" target="_blank" title="程序問答園區">繁體中文</a></li> <li><a href="http://ru.voidcc.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.voidcc.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.voidcc.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.voidcc.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.voidcc.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.voidcc.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.voidcc.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.voidcc.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.voidcc.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.voidcc.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.voidcc.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer> <!-- / footer --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-77509369-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-77509369-5'); </script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?67d4731349f0b00136755b80364ce381"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>