title: Is there a workaround for the IE11 table cell padding bug?
body: <p>We are having problems displaying an image in a css table cell (#content3) with relative padding. This ONLY occurs in IE11 and displays normally in all other browsers!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;    
      &lt;div id="container"&gt;    
          &lt;div id="content1"&gt;&lt;/div&gt;
          &lt;div id="content2"&gt;&lt;/div&gt;        
          &lt;div id="content3"&gt;&lt;img src="an-image.jpg"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#wrapper{width:95%;}
  #container{display:table; width:100%;}
  #content1{display:table-cell; width:28%; background:url(anotherimage.jpg);}
  #content2{display:table-cell; width:47%; background:url(yetanotherimage.jpg);}
  #content3{display:table-cell; width:20%; position:relative; padding-bottom:20%; height:0px;}
  #content3 img{height:100%; width:100%; position:absolute:0; left:0;}
  </code></pre>
  
  <p>This would seem to be a bug which has been reported <a href="https://stackoverflow.com/questions/20251303/how-can-i-work-around-this-ie11-layout-bug-related-to-table-cell-text-decoratio">here</a> </p>
  
  <p>However, none of the solutions offered work for us.</p>
  
  <p>Interestingly, the image appears as soon as we resize the browser window manually.</p>
  
  <p>Are there any CSS or JS/jQuery workarounds for this?</p>
  
  <p>Many thanks in advance for any help on this!</p>