ie8의 메뉴 항목이 겹칩니다.

안녕하세요 - 내 메뉴 항목 중 2 개가 ie8에 겹쳐 있습니다 (아래 스크린 샷 - '회사 소개'및 '언론'항목과 배경이 흰색 인 두 항목 사이의 흰색). 내 sitehttp : //goo.gl/34oQ8 - 왜 그런가?ie8의 메뉴 항목이 겹칩니다.

enter image description here

CSS 코드

#nav 
{ 
     right:2%; 
     list-style:none; 
     position:fixed; 
     /* float:right; */ 
     top:30px; 
     z-index:1000; 
     /* width:520px; */ 
} 

#nav > li { 
    display: inline-block; 
    /* dirty hack for IE7 */ 
    *display: inline; 
    *zoom: 1; 
} 

#nav a 
{ 
     font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
     font-weight:600; 
     letter-spacing:1px; 
     float:left; 
     top:30px; 
     display:inline-block; 
     font-size:11px; 
     margin-left:5px; 
     margin-right:5px; 
     padding-left:15px; 
     padding-right:15px; 
     text-decoration:none; 
     height:24px; 
     color:#666; 
     line-height:24px; 
     text-align:center; 
     box-shadow:1px 1px 2px rgba(0,0,0,0.2); 
     /* background:rgba(255,255,255,0.9); removed not ie8 compatible */ 
     text-transform:uppercase; 
     background: white; 
    opacity: 0.8; 
    filter: Alpha(opacity='80'); 
} 

#nav a:hover 
{ 
     background:#dedede; 
} 

#nav .current a 
{ 
     background:#666; 
     color:#ededed; 
}

HTML 코드

<ul id="nav"> 
    <li class="current"><a href="#presentation">Home</a></li> 
    <li><a href="#equipe">Team</a></li> 
    <li><a href="#plan-activite">About us</a></li> 
    <li><a href="#medias">Press</a></li> 
    <li><a href="#inline" class="modalbox">Contact</a></li> 
</ul>

출처

2012-08-02 Greg

, 며칠 전 형태의 문제 : –

가 그래, 난이 고정 된 생각,하지만 여전히이 문제를 가지고 있었다 – Greg

나는 당신이 원하는 무엇을하는 당신의 <li> 년대에서 <a> 요소 것이다 공간에 여유를두고 생각하지 않는다 . nav li 대신

또한

에 여백 왼쪽 및/또는 마진 오른쪽을 추가하십시오, HTML5 멋지게 아이디 = "탐색"당신은 당신의 간격과 패딩의 모든 요소를 이동해야

출처

2012-08-02 17:58:25

이것이 해결책이라고 생각합니다. –

둘 다 고마워, 나는 이것을 시도 할 것이다. 문제는 어떻게 "회사 소개"와 "보도"항목 만 표시됩니까? – Greg

을 대체 할 것 <nav> 태그를 포함 #nav> li.

#nav a의 코드는 LI가 메뉴 항목 자체의 스타일을 지정하는 데 사용할 수있는 링크 항목의 스타일을 지정하기위한 것이어야합니다.)

#nav > li { 
      display: inline-block; 
      margin: 0 5px; 
      padding: 3px 15px; 
}

이 코드를 조금 청소를 시작하는 것입니다 ..이 사이트를 기억

출처

2012-08-02 18:40:54

ie8의 메뉴 항목이 겹칩니다.

답변

관련 문제