css - 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

在navgivation li类中添加一个float:left..

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