no-wrap issue in IE 7

HTML:

<ul id="popular-tags-hidden">
<li id="tag-1"><a class="display-new-tag" href="#">Tag 1<img width="10" height="10" src="http://www.communr开发者_StackOverflow社区.com/images/add-tag.png"></a></li>
<li id="tag-2"><a class="display-new-tag" href="#">Tag 2<img width="10" height="10" src="http://www.communr.com/images/add-tag.png"></a></li>
<li id="tag-3"><a class="display-new-tag" href="#">Tag 3<img width="10" height="10" src="http://www.communr.com/images/add-tag.png"></a></li>
<li id="tag-4"><a class="display-new-tag" href="#">Tag 4<img width="10" height="10" src="http://www.communr.com/images/add-tag.png"></a></li>
<li id="tag-5"><a class="display-new-tag" href="#">Tag 5<img width="10" height="10" src="http://www.communr.com/images/add-tag.png"></a></li>
</ul>

CSS:

ul#popular-tags-hidden li {
    float: left;
    overflow: hidden;
    margin: 3px 6px 3px 0;
}

a.delete-new-tag, a.display-new-tag {
    float: left;
    background: #e2f2ce;
    height: 20px;
    padding: 0 5px 0 5px;
    margin: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-block;
    color: #466840;
}

IE 7 Result:

Desired Result:

The tags get cut off on the right side of the ul container. I have tried researching the problem and I think it has something todo with the padding, but I can't figure it out. Works in all browsers except IE7.

One way to fix it is to switch from float: left to display: inline-block on the lis.

It's less hassle if you do this for only IE7:

ul#popular-tags-hidden li {
    float: left;
    overflow: hidden;
    margin: 3px 6px 3px 0;

    /* just for ie7 */
    *float: none;
    *display: inline;
    zoom: 1
}

Compare:

float: left (as you had it): http://jsfiddle.net/cqSUy/

display: inline-block for only IE7: http://jsfiddle.net/CfXq6/

About *display: inline; zoom: 1 - Inline block doesn't work in internet explorer 7, 6

In short, it's how you say display: inline-block for IE7.