简单的菜单。 CSS在IE7中不起作用

Question

I have the following menu. Seems to work in all browser but not IE6 or IE7. What is causing the problem and How can i fix that.

Check working example at 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>

This is how it looks in IE7

Answer 1

Add 'display: inline;' to your 'li'.

#menu_wrap .button {
  display: inline;
}

Here is an article describing the bug in further detail: http://css-tricks.com/501-prevent-menu-stepdown/

Answer 2

Float the li tags instead of the a tags:

.button {
   float: left;
}

JSFiddle

Answer 3

尝试删除position: relative并使其float: left

Answer 4

Use this CSS, float left element <LI>

li.button{
  float: left;    
}