проблема без переноса в IE 7 - PullRequest
Новая
       18

проблема без переноса в IE 7

1 голос
/ 22 июня 2011

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 Issue

Желаемый результат:

Desired Result

Теги обрезаются на правой стороне контейнера ul. Я пытался исследовать проблему, и я думаю, что это связано с дополнением, но я не могу понять это. Работает во всех браузерах, кроме IE7.

1 Ответ

5 голосов
/ 22 июня 2011

Один из способов исправить это - переключиться с float: left на display: inline-block на li s.

Это меньше хлопот, если вы сделаете это только для 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.

...