【发布时间】：2019-09-16 18:42:34
【问题描述】：
box-sizing:border-box 和 Internet Explorer 有问题。以下示例说明了我的布局：
<div class="content">
<div class="box">
<table>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>
<div class="Images">
<div class="liner">
<a href="https://www.example.com/image.jpg"><img src="https://www.example.com/image.jpg"></a>
</div>
<div class="liner">
<a href="https://www.example.com/image.jpg"><img src="https://www.example.com/image.jpg"></a>
</div>
<div class="liner">
<a href="https://www.example.com/image.jpg"><img src="https://www.example.com/image.jpg"></a>
</div>
<div class="liner">
<a href="https://www.example.com/image.jpg"><img src="https://www.example.com/image.jpg"></a>
</div>
<div class="liner">
<a href="https://www.example.com/image.jpg"><img src="https://www.example.com/image.jpg"></a>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
请注意，这只是我页面的粗略草图。真实的包含多达 30 张图像。 div的css如下：
#content .box .Images {
padding:0 0 20px 0;
box-sizing:border-box;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}
#content .box .Images .liner {
float:left;
padding:20px 0 0 0;
box-sizing:border-box;
}
这在 Chrome 和 Firefox 中运行良好，但在 IE 11 中不适用。IE 11 在一行中显示所有图像，没有空白或中断。这会导致图像溢出 td。我在 div 中的其他页面上使用相同的结构，IE 11 不会产生任何问题。
所以我猜想 IE 11 和 CSS box-sizing:border-box 属性存在问题。我试图为“图像” div 设置一个固定的最大宽度，但这没有帮助。
有人知道如何解决这个问题吗？还是 IE 11 只是弄乱了表格单元格中使用的 box-sizing？
【问题讨论】：
-
我用 IE 11 和其他浏览器测试你的代码。我发现所有浏览器都在 1 列中显示图像。这是我的测试结果。 imgur.com/a/eap9zuM 所以我无法用您的示例代码产生问题。其他一些 CSS 代码可能会影响 IE 11 中的输出。如果可能的话，您可以尝试发布可能产生问题的示例代码。我们将再次尝试进行测试以产生问题。它可以帮助缩小问题的范围。感谢您的理解。
标签： html css internet-explorer-11