简单的菜单。 CSS无法在IE7中运行

Question

我有以下菜单。似乎可以在所有浏览器中工作，但不适用于IE6或IE7。是什么导致了这个问题，我该如何解决这个问题。

查看http://jsfiddle.net/2ysCC/

上的工作示例

#menu_wrap {
    margin-top:20px auto 0 auto;
    padding:0;
    width:780px;
    height:40px;
    list-style-type:none;
}
.button a {
    cursor:pointer;
    text-align:center;
    font:13px/100% Arial, Helvetica, sans-serif;
    font-weight:bold;
    position:relative;
    min-width:50px;
    height:20px;
    float:left;
    padding:10px;
    padding-right:0;
    text-decoration:none;
}

.Red, .Red .button a {
    color:#faddde;
    background: #ed1c24;
}
.button:last-child a {
    float:left;
    border:none;
}

<ul id="menu_wrap" class="Red">
  <li class="button"><a href="#">Home</a></li>
  <li class="button"><a href="#">portfolio</a></li>
  <li class="button"><a href="#">Latest</a></li>
</ul>

这就是IE7的外观

Answer 1

添加'display：inline;'你的'李'。

#menu_wrap .button {
  display: inline;
}

以下是一篇更详细地描述错误的文章：http://css-tricks.com/501-prevent-menu-stepdown/

Answer 2

浮动li标签而不是a标签：

.button {
   float: left;
}

JSFiddle

Answer 3

尝试删除position: relative并将其设为float: left

Answer 4

使用此CSS，浮动左侧元素<LI>

li.button{
  float: left;    
}