Internet Explorer가 가로로 표시되어야 할 때 목록을 세로로 표시합니다.

Question

가로로 표시해야하는 3 개의 버튼 목록이 있습니다. FF로는 모두 좋지만 IE는 서로를 겹쳐 쌓고 있습니다. 목록 항목에 대한 내 코드는 다음과 같습니다. 당신의 도움에 대한

덕분에

<style type="text/css"> 


      #navigation { 
     list-style: none; 
     margin: 0px 0px 0px 278px; 
     padding: 0; 
     text-align:left; 
     z-index:1;  

    } 

    #navigation li { 
     display: inline-block; 
    } 

    #navigation a { 
     display: block; 
     width: 140px; 
     height: 15px; 
     background: url("http://aracelid.110mb.com/boton_ROLLOUT_08.png") no-repeat; 
     padding: 10px 0.5em; 
     color: #FFFFFF; 
     text-decoration: none; 
     font-size:12px; 
     text-align: center; 
    } 

    #navigation a:hover { 
     background: url("http://aracelid.110mb.com/boton_ROLLOVER_08.png") no-repeat; 
    } 


      #one, #two,#three {background: url("http://aracelid.110mb.com/boton_ROLLOUT_08.png") no-repeat 0px 0px;} 

     #one_div{width:140px;height:36px;} 
#two_div{width:140px;height:36px;} 
#three_div{width:140px;height:36px;} 

<ul id="navigation"> 
    <li><a href="#" id="one" style="color:#FFFFFF;text-decoration:none;" ><div id="one_div">One</div></a></li> 
    <li><a href="#" id="two" style="color:#FFFFFF;text-decoration:none;"><div id="two_div" >Two</div></a></li> 
    <li><a href="#" id="three" style="color:#FFFFFF;text-decoration:none;"><div id="three_div" >Three</div></a></li> 
</ul> 

Answer 1

float를 추가 navgivation 리 클래스에 남아 ..

#navigation li { 
     display: inline-block; 
     float:left; 
    }