Есть ли обходной путь для ошибки заполнения ячеек таблицы IE11?

У нас возникают проблемы с отображением изображения в ячейке таблицы css (# content3) с относительным заполнением. Это происходит ТОЛЬКО в IE11 и нормально отображается во всех других браузерах!

HTML

<div id="wrapper">    
    <div id="container">    
        <div id="content1"></div>
        <div id="content2"></div>        
        <div id="content3"><img src="an-image.jpg"></div>
    </div>
</div>

CSS

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

Похоже, это ошибка, о которой сообщалось здесь

Однако ни одно из предложенных решений у нас не работает.

Интересно, что изображение появляется, как только мы вручную изменяем размер окна браузера.

Есть ли обходные пути CSS или JS / jQuery для этого?

Большое спасибо за любую помощь в этом!


javascript html jquery css internet-explorer-11
person Richard Tinkler    schedule 22.09.2014    source источник
comment
Возможно, меня кто-нибудь выгонит за это, но не рассматривали ли вы возможность использовать <table> для лучшей совместимости? Точнее, как насчет display:inline-block?   -  person Niet the Dark Absol    schedule 22.09.2014
comment
@ JukkaK.Korpela: как я уже упоминал, предлагаемые решения вопроса, на который вы ссылаетесь, НЕ решают проблему для нас. Наш код также отличается от того, что задано в другом вопросе. Удалите повторяющуюся запись, чтобы мы могли получить достойные ответы на эту проблему, которая, согласно записи об ошибке MS, вызывает трудности у нескольких людей.   -  person Richard Tinkler    schedule 22.09.2014