html - IE 11 框大小问题(添加边框或填充时不起作用)

Question

我有一个 <ul>每个<li>应该将可用宽度一分为五:

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

以下 CSS 在 Chrome 和 Firefox(最新)中工作正常，但在 Internet Explorer 11 中失败，其中最后一个 <li>换行，一行中只显示四个:

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

这是已知错误还是我遗漏了什么？

Answer 1

发现问题了!我不知道为什么使用谁编码的页面:

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

强制 Edge(最新)版本的渲染引擎(当然)解决了这个问题。 IE7 不支持 box-sizing 和许多其他内容。