CODEWITHSUNDEEP
htmlcssinternet-explorerhtml-lists
gremo
gremo

Reputation: 48909

IE 11 box-sizing issue (not working when adding border or padding)

I have an <ul> where each <li> should split the available width in five:

<ul class="other-languages-products-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

The following CSS works fine in Chrome and Firefox (latest) but fails in Internet Explorer 11, where last <li> goes on a new line and only four are displayed in a row:

.other-languages-products-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.other-languages-products-list li {
    float:left;
    width: 20%;
    box-sizing: border-box;
    border: 1px solid black;
}

.other-languages-products-list:before,
.other-languages-products-list:after {
    display: table;
    content: " ";
}

.other-languages-products-list:after {
    clear: both;
}

Is this a know bug or I'm missing something?

Upvotes: 1

Views: 10444

Answers (1)

gremo
gremo

Reputation: 48909

Found the problem! I don't know why who coded the page used:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Forcing Edge (latest) version of the rendering engine (of course) solves the problem. IE7 doesn't support box-sizing and a lot of other stuff.

Upvotes: 2

Related Questions