IE7 CSS 수평 메뉴 - 리가 서로 내부에 중첩되어있는 것 같습니다.

Question

IE 문제는 시간과 시간이 다시 쏟아져 나오는 것을 알고 있지만 아침마다 응답을 찾고 아무도 나를 도와주지 않는 것 같습니다.

내 가로 탐색 메뉴가 IE7을 제외한 모든 브라우저에서 완벽하게 렌더링되는 것으로 보입니다. 나는이 문제가 아마도 너비가없는 목록으로 할 수 있다고 생각하고있다. (그러나 너비가 필요 없다. 나는 텍스트의 길이에 따라 자동으로 바뀌기를 바란다.) 또는 리가 각각의 안에 앉아있는 것처럼 보인다. 기타 14px 패딩 뚜껑을 계속 적용하십시오. 내 리가 모두 닫는 꼬리표와 부유물을 가지고 있기 때문에 나는 왜 그들이 서로 안에 앉아 있는지 모르겠다 : 왼쪽; 여기

내 코드는 ...

<div id="navig"> 
    <ul> 
     <li class="navig-left"></li> 
     <li class="home"><b>Home</b></li> 
     <li><a class="tabs" href="about.html">About Us</a></li> 
     <li><a class="tabs" href="services.html">Services</a></li> 
     <li><a class="tabs" href="personal-injury-panel.html">Personal Injury Panel</a></li> 
     <li><a class="tabs" href="client-testimonials.html">Client Testimonials</a></li> 
     <li><a class="tabs" href="contact.html">Contact Us</a></li> 
     <li><a class="tabs" href="careers.html">Careers</a></li> 
     <li><a class="tabs" href="affiliates.html">Affiliates</a></li> 
     <li class="navig-right"></li> 
    </ul> 
</div> 

<div class="clr"></div> 



#navig { width:960px; height:46px; background:url(images/navig_bkgrnd.png); } 
#navig ul { list-style-type:none; height:46px; width:960px; } 
#navig ul li.active { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; background:url(images/navig_hover.gif) repeat-x; color:#000000; font-weight:200; font-size:14px; font-style:normal; } 
#navig ul li.home { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; color:#ffffff; font-weight:200; font-size:14px; } 
#navig ul li a.tabs { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; text-decoration:none; color:#FFFFFF; font-weight:200; font-size:14px; font-style:normal; } 
#navig ul li a:hover { display:block; text-decoration:none; height:32px; font-family:Arial, Helvetica, sans-serif; color:#000000; font-weight:200; font-size:14px; font-style:normal; background:url(images/navig_hover.gif) repeat-x; } 
.navig-left { float:left; width:23px; height:46px; background:url(images/navig_left.png); } 
.navig-right { float:left; width:23px; height:46px; background:url(images/navig_right.png); } 

Answer 1

봅니다 (당신은 플로트 방식을 사용하고 있기 때문에) 모든 li 항목이 떠 있도록 다음과 같은 CSS 규칙을 추가 :

#navig ul li {float:left;} 

가 보면 당신의 스타일 시트를 사용하면 메뉴의 모든 목록 항목에 실제로 float:left을 적용하지 않고 li.active 및 li.home 만 적용합니다. 다른 브라우저는 그것을 다루는 것처럼 보이지만 IE는 그것을 좋아하지 않습니다.

jsFiddle (나는 당신이 우리에 대한 액세스 권한이없는 배경 이미지 위에 하얀 텍스트 사용하고 있기 때문에 작업을 진행하기 위해 몇 가지 색상을 수정했다주의 -. 테스트 목적으로 흰색에 흰색의 원인을) 나는이 테스트

IE 7/8/9, FF 및 Chrome의 바이올린 이제는 일관되게 작동합니다.

Answer 2

강제로 IE7을 ie8로 렌더링하여 페이지의 머리 부분에 추가 할 수 있습니다.

<meta http-equiv="X-UA-Compatible" content="EDGE" />