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和其他很多东西。

IE 11大小调整问题（添加边框或填充时不起作用）

1 个答案: