오페라 브라우저는 다른 온라인 및 로컬

Question

을 보여 주며이 부분에서 많은 도움이되는 힌트를 읽은 후에 메뉴를 보여줍니다. 여기에서 내 문제에 대한 답변을 찾을 수 있기를 희망합니다. 내가 작업하고있는 웹 페이지에는 button background-imgs가있는 가로 메뉴가 있습니다. 유효성 검사 후 브라우저에서 테스트 해 보면 FF, Chrome 및 Opera에서 제대로 작동합니다. 업로드 후 나는 발견했다 온라인 다른 브라우저는 차이가없는 동안 Opera는 버튼의 일부를 표시하지 않습니다. ???? 미리 감사드립니다.이 문제에 대한 아이디어가 있으십니까?

Answer 1

내 손톱을 물고 뜯어보고, 시험해 보았습니다. 메뉴의 이상한 렌더링은 5 개의 링크 중 2 개에서만 발생합니다 ... 하나는 "commonmail.html"이고 다른 하나는 "index.html"에 다시 링크됩니다.

menu with fantasy link names

menu with normal link names

가 마크 업이 : 나는 판타지 이름을 선택하거나 그냥 CSS를 렌더링 HREF = "#"을 입력하면 properly.I는 문제를 보여주기 위해 2 개 스크린 샷에 링크를 추가 이 하나

<ul> 
    <li><a class="direkt" href="#">home</a></li> 
    </ul> 

    <ul> 
    <li class="firstlevel">our houses 

     <ul> 
     <li><a href="nikiti_location.html">in nikiti</a></li> 

     <li><a href="#">in kastri</a></li> 

     <li><a href="#">new projects</a></li> 
     </ul> 

    </li> 
    </ul> 

    <ul> 
    <li><a class="direkt" href="nikiti_info.html" title="Informations about Nikiti and the peninsula of Sithonia">nikiti</a></li> 
    </ul> 

    <ul> 
    <li class="firstlevel">informations 

     <ul> 
     <li><a href="#" title="Read about our family business and our business philosophy">company</a></li> 

     <li><a href="#" title="">buying property in greece</a></li> 
     </ul> 

    </li> 
    </ul> 

    <ul> 
    <li><a class="direkt" href="commonmail.html" title="Informations about Nikiti and the peninsula of Sithonia">contact</a></li> 
    </ul>  

</nav> 

그리고 CSS는 이것이다 :

nav { 
width: 704px; 
padding: 0 0 0 16px; 
float: left; 
} 
nav ul { 
float: left; 
width: 138px; 
list-style-type: none; 
} 
nav li.firstlevel { 
font-size: 93%; 
    font-weight:bold; 
text-align: center; 
padding-top: 17px; 
padding-bottom: 17px; 
color: #fff; 
border: 1px solid transparent; /*--erforderlich für IE 7--*/ 
background: url(../pic/button110.png) 50% 50% no-repeat; 
} 
nav a { 
text-decoration: none; 
display: block; 
font-size: 90%; 
text-align: left; 
padding-left: 6px; 
padding-top: 6px; 
padding-bottom: 6px; 
background: url(../pic/sublistbg.png) 0 0 repeat-x; 
color: #fff; 
} 
nav a:hover { 
color: #454545; 
background: url(../pic/sublisthoverbg.png) 0 0 repeat-x; 
} 
nav li { 
position: relative; 
} 
nav ul ul { 
position: absolute; top:50px; left: 30px; 
width: 170px; 
z-index: 2; 
display: none; 
} 
nav ul li:hover ul { 
display: block; 
} 
nav ul a.direkt:link { 
font-size: 93%; 
font-weight: bold; 
padding-top: 17px; 
padding-bottom: 17px; 
padding-left: 0; 
text-align: center; 
color: #fff; 
border: 1px solid transparent; 
background: url(../pic/button110.png) 50% 50% no-repeat; 
} 

nav ul a.direkt:hover { 
color: #454545; 
background: url(../pic/button110active.png) 50% 50% no-repeat; 
border: 1px solid transparent; 
}