Internet Explorer 和 box-sizing：td 中 div 内的边框框

Posted 2023-03-05

【中文标题】Internet Explorer 和 box-sizing：td 中 div 内的边框框

【英文标题】：Internet Explorer and box-sizing: border box within divs in td

【发布时间】：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 中的输出。如果可能的话，您可以尝试发布可能产生问题的示例代码。我们将再次尝试进行测试以产生问题。它可以帮助缩小问题的范围。感谢您的理解。

【参考方案1】：

对不起，我的反应迟了，谢谢你们的回答。

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

经过更多研究，我找到了这个https://github.com/philipwalton/flexbugs/issues/179，它准确地描述了我的问题。通过在表格的 CSS 中添加 table-layout:fixed，我终于设法让我的布局与 IE 11 一起使用。我检查了 IE 11、Firefox 和 Chrome，它现在可以在所有浏览器中正常运行。

【参考方案2】：

我试图在 sn-p 中复制您的问题，但实际上我没有任何运气。在 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 的事实有关。

用于 IE 的 Flexbox 很古怪。它在某些方面偏离了标准，并且与现代浏览器相比通常存在错误。这些 SO 答案更详细地介绍了它：

Flexbox code working on all browsers except Safari. Why?

display: flex not working on Internet Explorer

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

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