тег li, IE7 и текст в одну строку (строку)

У меня есть текст в тегах <li>, и я хотел бы показать этот текст в одну строку.

С Firefox все хорошо, а вот с IE7 нет. В IE7 я должен дать <li> элементам width. Но текст может быть очень длинным или коротким. так что мне это не к добру :width 50px;

#menu_all li{
    float:left;
    display: block-inline;
    padding:0;
    margin-left: 5px;
}
<div id="menu_all">
    <ul>
        <li><span class="text">Text</span></li>
        <li><span class="text">Text2</span></li>
        <li><span class="text">Text2 text text</span></li>
    </ul>
</div>

Как сделать так, чтобы это меню <li> хорошо отображалось в IE7 на одной строке?

Спасибо


css internet-explorer-7
person user319854    schedule 01.12.2010    source источник
comment
У меня есть: display: block-inline;, так что это похоже на: display: inline;   -  person user319854    schedule 01.12.2010
comment
Block-inline — это не то же самое, что inline.   -  person Damien    schedule 01.12.2010
comment
На самом деле это встроенный блок; не встроенный в блок; и IE7, похоже, не поддерживает это. так что попробуйте встроенный, он будет работать. И да, это не то же самое, что display: inline;   -  person Vlad.P    schedule 01.12.2010
comment
Ставить float: left и display: inline-block одновременно нет смысла. Плавающий элемент всегда является блочным. Выбери один. Либо должно работать. Если это не так, вы упускаете что-то важное. Также вы должны указать, находитесь ли вы в стандартном или причудливом режиме.   -  person RoToRa    schedule 01.12.2010

Ответы (4)


arrow_upward
3
arrow_downward

Похоже на ошибку в вашем CSS. Это display: inline-block;, а не display: block-inline;.

Пересмотренный код:

#menu_all li
{
    float: left;
    display: inline-block;
    padding: 0;
    margin-left: 5px;
}

<div id="menu_all">
    <ul>
        <li><span class="text">Text</span></li>
        <li><span class="text">Text2</span></li>
        <li><span class="text">Text2 text text</span></li>
    </ul>
</div>
person Damien    schedule 01.12.2010

arrow_upward
1
arrow_downward

если я понимаю этот вопрос, вам это нужно;

#menu_all ul li{ display: list-item;}
person spielersun    schedule 01.12.2010

arrow_upward
0
arrow_downward

Вот так:

 #menu_all ul li{
        float: left;
        display: inline;
        padding: 0;
        margin: 0 0 0 5px;
    }
    <div id="menu_all">
        <ul>
            <li><span class="text">Text</span></li>
            <li><span class="text">Text2</span></li>
            <li><span class="text">Text2 text text</span></li>
        </ul>
    </div>
person Vlad.P    schedule 01.12.2010

arrow_upward
0
arrow_downward

Во-первых, display: block-inline; неправильно - должно быть display: inline-block;.

Во-вторых, использование display и float в одном стиле необязательно. float автоматически переключает режим отображения на block. (Но я всегда предпочитаю использовать inline-block вместо float везде, где это возможно, так как float имеет ряд других раздражающих причуд)

Наконец, режим inline-block содержит ошибку в старых версиях IE (IE6 и IE7), что означает, что он работает только для элементов, которые имеют собственный стиль отображения inline.

Это означает, что у вас есть серьезные проблемы с использованием inline-block, если вам нужна поддержка IE6 или IE7. Это работает для некоторых тегов, но не для других.

К счастью, есть быстрый обходной путь. IE7 обрабатывает inline в основном так же, как inline-block, поэтому для IE7 вы можете просто указать display:inline;. но это означает использование отвратительного CSS-хака, чтобы он работал во всех случаях:

.mystyle {
    display:inline-block;
     /*next two lines IE7-hack*/
    zoom:1;
    *display:inline;
}

(zoom:1; также является стилем, специфичным для IE, который представляет собой окольный способ взломать IE, чтобы отобразить его в правильном режиме)

Альтернативой хаку со звездочкой было бы использование функции условных комментариев IE для указания этих стилей для IE7, но это также может быть довольно неприятным.

Кстати, для получения дополнительной информации о поддержке браузером стиля display см. эту страницу на Quirksmode.org: http://www.quirksmode.org/css/display.html

person Spudley    schedule 01.12.2010