Internet Explorer and box-sizing: border box within divs in td

Question

I have an issue with box-sizing:border-box and Internet Explorer. The following example illustrates my layout:

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

Please not that this is only a rough sketch of my page. The real one contains up to 30 images. The css for the divs are as follows:

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

This works fine in Chrome and Firefox, but not in IE 11. IE 11 displays all images in one row without a blank or a break. This causes the images to overflow the td. I'm using the same structure on other pages within divs were IE 11 doesn't create any problems.

So I guess there is an issue with IE 11 and the CSS box-sizing:border-box property. I tried to set a fixed max width to the "Images" div, but this didn't help.

Has anyone an idea how to fix this issue? Or is IE 11 just messing up with box-sizing being used within table cells?

I test your code with IE 11 and other browsers. I find that all the browsers are displaying the image in 1 column. Here is my testing result. https://imgur.com/a/eap9zuM So I am not able to produce the issue with your sample code. It can be possible that some other CSS code affect the output in IE 11. If possible than you can try to post that sample code which can produce the issue. We will again try to make a test to produce the issue. It can help to narrow down the issue. Thanks for your understanding. — Deepak-MSFT, Apr 29 '19 at 02:45

score 0 · Answer 1 · answered May 04 '19 at 17:42

Sorry for my late reaction and thank you both for your answers.

I actually wanted the images to be displayed in a row side by side and wrapping to the next row when the maximum width of the td/table is reached.

After some more researching, I came to this https://github.com/philipwalton/flexbugs/issues/179 which describes precisely my issue. I finally managed to get my layout to work with IE 11 by adding table-layout:fixed to the CSS of the table. I checked for IE 11, Firefox and Chrome, and it now works in all Browsers as expected.

score -1 · Answer 2 · edited May 02 '19 at 05:14

I have tried to replicate your issue in a snippet however I haven't actually had any luck. It seems to work okay when I view it in IE11, and the images stack in a column, not a row, just the same as when I view it in 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>

(See also the JSFiddle)

So I'm guessing part of the issue is something you haven't included in your example code - hopefully that can guide you in your problem solving.

Furthermore, even though I can't see the issue directly in this case I can make a strong guess that the issue is actually more to do with the fact you are using flexbox.

Flexbox for IE is quirky. It deviates from the standard in a few ways and is generally buggy compared to modern browsers. These SO answers go into it in a bit more detail:

Flexbox code working on all browsers except Safari. Why?

display: flex not working on Internet Explorer

As well as the flexbugs project that contains known bugs and workarounds.

Hope that helps. If it doesn't, then I think you will need to update your example code to make it a clear verifiable example.

Internet Explorer and box-sizing: border box within divs in td

2 Answers2