Как в internet Explorer перенести li на новую строчку?

Question

[EVOSandru6]

Добрый день,

Такая проблема, сделал виртуальную клавиатуру, которая хорошо смотрится на стандартных браузерах.

Структура - ul > li (float:left)

В местах прерываний, где необходимо перейти на след строку символов, использовал св-во

clear:left

Но оно не работает в explorer.

Пробовал создавать холостой li

clear:both;
width:auto;
height:1px;
background: none;

между символами на месте перехода,

и еще для данного li указывал :after

.keyboard li.clear:after
{
    height: 1%;
}

но все равно не работает/ Помогите советом.

Answer 1

[Andrey Dyrkov]

Отображайте inline-block все li
Для переходов можно сделать типо этого

<ul>
    <li class="row">
        <li>1<li>
        <li>2</li>
    </li>
    <li class="row">
        <li>3<li>
        <li>4</li>
     </li>
</ul>

ul li {
 display:inline-block;
}
li.row{
display:block;

Работает до ie8 и выше

Comments

[Сергей]

Andrey Dyrkov А есть ли смысл поддерживать IE младше 11 версии? Разве их не перестали поддерживать в этом году?

[Andrey Dyrkov]

Сергей: я вот прохожу практику в ОМК ИТ, там пользователи 80% ie8 15% ie9 :) Смотря для кого сайт)

[Сергей]

Andrey Dyrkov: Я это не просто спрашиваю) Просто еще в 2015 анонсировали, что ie младше 11 microsoft перестанет поддерживать в январе 2016

[Andrey Dyrkov]

Сергей: я в курсе) и windows 8 тоже. Но смысла нет конечно если у вас пользователи сайта меньше 10% на ie8. Но многие заказчики даже за такое колличество борятся)