Question

我遇到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只是搞砸了表格单元格中使用的框大小？

Answer 1

对不起，我的反应很晚，谢谢你们的回答。

我实际上希望图像并排显示，并在达到td /表的最大宽度时包装到下一行。

经过更多研究，我来到了https://github.com/philipwalton/flexbugs/issues/179，它准确地描述了我的问题。最终，我通过向表的CSS添加table-layout:fixed来使布局与IE 11兼容。我检查了IE 11，Firefox和Chrome，现在可以按预期在所有浏览器中使用了。

Answer 2

我试图将您的问题复制到摘要中，但实际上我没有任何运气。当我在IE11中查看它时，似乎工作正常，并且图像堆叠在列中，而不是行中，与在Chrome中查看图像时相同。

td{
  border:2px solid blue;
  width:200px;
}

img{
  max-width:100px;
  height:auto;
}

#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;
}

<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://upload.wikimedia.org/wikipedia/commons/a/ad/Papaver_ori%C3%ABntale._Locatie%2C_Tuinen_Mien_Ruys_02.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Papaver_ori%C3%ABntale._Locatie%2C_Tuinen_Mien_Ruys_02.jpg"></a>
           </div>
           <div class="liner">
             <a href="https://upload.wikimedia.org/wikipedia/commons/a/ad/Papaver_ori%C3%ABntale._Locatie%2C_Tuinen_Mien_Ruys_02.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Papaver_ori%C3%ABntale._Locatie%2C_Tuinen_Mien_Ruys_02.jpg"></a>
           </div>
           <div class="liner">
             <a href="https://upload.wikimedia.org/wikipedia/commons/a/ad/Papaver_ori%C3%ABntale._Locatie%2C_Tuinen_Mien_Ruys_02.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Papaver_ori%C3%ABntale._Locatie%2C_Tuinen_Mien_Ruys_02.jpg"></a>
           </div>
           <div class="liner">
             <a href="https://upload.wikimedia.org/wikipedia/commons/a/ad/Papaver_ori%C3%ABntale._Locatie%2C_Tuinen_Mien_Ruys_02.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Papaver_ori%C3%ABntale._Locatie%2C_Tuinen_Mien_Ruys_02.jpg"></a>
           </div>
           <div class="liner">
             <a href="https://upload.wikimedia.org/wikipedia/commons/a/ad/Papaver_ori%C3%ABntale._Locatie%2C_Tuinen_Mien_Ruys_02.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Papaver_ori%C3%ABntale._Locatie%2C_Tuinen_Mien_Ruys_02.jpg"></a>
           </div>
         </div>
       </td>
    </tr>
  </table>
  
</div>
</div>  
<hr>
<small>
    Sample image from Wikimedia Commons:
  </small><br>
  <small>
  (Dominicus Johannes Bergsma [<a href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a>], <a href="https://commons.wikimedia.org/wiki/File:Papaver_ori%C3%ABntale._Locatie,_Tuinen_Mien_Ruys_02.jpg">via Wikimedia Commons</a>)
  </small>

（另请参见JSFiddle）

所以我想问题的一部分是您的示例代码中未包含的内容-希望可以指导您解决问题。

此外，即使在这种情况下我无法直接看到问题，我也可以断定问题实际上与您正在使用flexbox有关。

Flexbox for IE有点古怪。它在某些方面偏离了标准，与现代浏览器相比，通常是错误的。这些SO答案会更详细地介绍其中：

Flexbox code working on all browsers except Safari. Why?

display: flex not working on Internet Explorer

以及包含已知错误和解决方法的flexbugs project。

希望有帮助。如果没有，那么我认为您将需要更新示例代码以使其成为clear verifiable example。

Internet Explorer和框大小调整：td中div中的边框

2 个答案: