IE6의 가로 방향 탐색 메뉴 CSS에 문제가 있습니다.

Question

질문이 있습니다. 나는 공식적인 CSS 튜토리얼에 의해 만들어진 수평 네비게이션 메뉴를 가지고있다.

이

div.horizontal 
{ 
width:700px; 
height:30px; 
margin:0 auto; 
} 
div.horizontal ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
} 
div.horizontal li 
{ 
float:left; 
} 
div.horizontal a 
{ 
display:block; 
position:relative; 
padding-left:20px; 
padding-right:20px; 
padding-top:18px; 
padding-bottom:0px; 
} 
div.horizontal a:link,div.horizontal a:visited 
{ 

white-space: nowrap; 
height: 40px; 
line-height: 15px; 
font-weight: normal; 
font-size:12px; 
overflow: hidden; 
text-decoration: none; 
text-transform: uppercase; 
z-index: 100; 
color: #fff; 
cursor: pointer; 
font-family:"Trebuchet MS", Arial, sans-serif; 
} 
div.horizontal a:hover,div.horizontal a:active 
{ 
    background-image:url(images/horiz-menu-active.png); 
    background-repeat:repeat-x; 
color:#FFF; 
} 

HTML : 내가 원하는대로 IE7과 IE8을 includning 모든 브라우저에서

<div class="horizontal"> 
      <ul> 
       <li><a href="contacts.php">За контакти</a></li> 
       <li><a href="comments.php">Мнения и коментари</a></li> 
       <li><a href="media_center.php">Медиа Център</a></li> 
       <li><a href="news.php">Новини</a></li> 
       <li><a style="border-right:2px #900 solid;" href="aboutus.php">За нас</a></li> 
      </ul> 
</div> 

이 정상 표시하지만 IE6에서 수직의 여기에 CSS입니다. 마일에게 어떤 조언을 해줄까요?

여기

라이브 예를 : jsfiddle.net/uhRzR

Answer 1

IE6는 div.horizontal li

예를 들어 고정 폭을 추가하는 것입니다 내가이 문제를 해결하기 위해 당신을 제안 할 수있는 방법 : http://jsfiddle.net/uhRzR/2/ <를 -이 예에서는 내가 폭 100 픽셀을 추가 .

---

대체 솔루션에 대한 _width:0px;를 추가 Internet Explorer 용 CSS를 해킹을 사용하는 것입니다 div.horizontal li

예 : http://jsfiddle.net/uhRzR/5/

Answer 2

그냥이

와 CSS를

div.horizontal li 
{ 
float:left; 
} 
div.horizontal a 
{ 
display:block; 
position:relative; 
padding-left:20px; 
padding-right:20px; 
padding-top:18px; 
padding-bottom:0px; 
} 

의 부품을 교체

div.horizontal li 
{ 
display:inline; 
} 
div.horizontal a 
{ 
padding:18px 20px 0px 20px; 
}