1

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.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 结果：

IE 7 问题

期望的结果：

期望的结果

标签在 ul 容器的右侧被切断。我已经尝试研究这个问题，我认为它与填充有关，但我无法弄清楚。适用于除 IE7 以外的所有浏览器。

4

1 回答 1

5

解决它的一种方法是从s切换float: left到。display: inline-blockli

如果您只为 IE7 执行此操作，那么麻烦会更少：

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

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

相比：

float: left（如你所愿）：http: //jsfiddle.net/cqSUy/

display: inline-block仅适用于 IE7：http: //jsfiddle.net/CfXq6/

关于*display: inline; zoom: 1-内联块在 Internet Explorer 7、6 中不起作用

简而言之，这就是您display: inline-block对 IE7 的说法。

于 2011-06-22T17:02:52.090 回答