How to move li to a new line in internet explorer?

Question

css

Good afternoon,
Such a problem, I made a virtual keyboard that looks good on standard browsers.
Structure - ul > li (float:left)
In places of interruptions, where it is necessary to go to the next line of characters, I used the
property clear:left
But it does not work in explorer.
Tried creating a blank li

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

between the characters at the transition point,
and also for the given li indicated :after

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

but still does not work / Help with advice.

Answer 1

Display inline-block all li
For transitions you can do something like this

<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;

Works up to ie8 and above