display:block breaking the float in IE6

The code below works fine in Safari and Firefox but not in IE6. It's when I include the display:block for #horNav li a. The float breaks in IE6. Is there a way to have display:block and not to break the float? If I include width for #horNav li it will work, but I don't want to specify the width for it as the the width may vary.

CSS:

#horNav{
    margin:0;
    padding:0;
    list-style-type:none;
    border: 0px solid #486B02;
    font-size:13px;
    font-family:Ari开发者_如何学Cal;
}
#horNav  li{
    float:left;
}
#horNav  li  a {
    display:block;
    color: #000;
    text-decoration: none;
    height:30px;
    line-height:30px;
    padding:0 40 0 19;
    border:solid 1px blue;
}

HTML:

<ul id="horNav">
    <li><a>Menu 1</a></li>
    <li><a>Menu 2</a></li>
    <li><a>Menu 3</a></li>
    <li><a>Menu 4</a></li>
</ul>

add float: left to the a as well. You will not then need display: block; on the a as well because a floated element is automatically a block

Try the following:

Remove float:left; for #horNav li and add

#horNav li { display: inline-block; }

I think you can remove line-height and height for #horNav li a