IE6+7中的无序水平列表问题

Question

我有一个无序列表，它在除ie6+7之外的大多数浏览器中都显示良好。问题是，我对列表项设置了样式，给它们一个宽度和高度，并将它们显示为一个块，这样它们就有了正确的大小。IE解释块并将列表项垂直放置，而不是水平放置。这是我的代码；

jsfiddle：http://jsfiddle.net/NY94w/1/

HTML

<div>
     <ul class="hozlist">
          <li><a href="#" class="btnyellow ">View Details</a></li>
          <li><a href="#" class="btnyellow ">View NDP</a></li>
          <li><a href="#" class="btnyellow ">View News</a></li>
    </ul>
</div>​

CSS

ul.hozlist {
    list-style: none;
    padding: 0px;
    margin: 0px;
    text-align: left;
}
ul.hozlist li {display: inline-block; *display: inline}
    .btnyellow
    {
        width: 93px;
        height: 21px;
        background: yellow;      
        border:1px solid red;
        line-height:21px;
        vertical-align: middle;    
        padding: 0;
        cursor: pointer;
        font-size: 70%;
        text-align: center;
        display: block;
    }
    a.btnyellow, a.btnyellowsmall{text-decoration: none;color: black;font-family: Arial;}

​

Answer 1

虽然A.K的答案可以解决您的问题，但使用float并不总是最好的解决方案。如果您不想浮动元素，可以将zoom:1添加到ul.hozlist li {}规则集。

ul.hozlist li {display: inline-block; *display: inline; zoom:1;}

Answer 2

在下面使用float:left而不是display: inline-block; *display: inline

ul.hozlist li {float: left}

见演示

Answer 3

IE支持内联块，但仅适用于本机内联的元素。所以，如果你真的想使用内联块，你只能使用跨度、strong和ems

使用float:left而不是inline-block:

ul.hozlist li {float: left;}