IEでCSSでdisplay:table-cellに指定された要素に、GoogleMap APIを使って地図表示させようとしたらハマったので対処法をメモしておきます。
うまくいかなかったコード
<div class="tbl">
<section id="map"></section>
<section>hogehoge</section>
</div>
当初は上のように.tblにdisplay:table、sectionタグをdisplay:table-cellにし、hogehogeのところの内容量によって高さが可変するようにしていました。
Chromeではまったく問題なく期待どおりの表示になってくれますが、IEだと冒頭の画像のようにGoogleMapがセルの高さに100%の表示にはならずに謎の高さで表示されてしまいます。
対処法（暫定）
<div class="tbl">
<section><div id="map" style="width:100%;height:800px;"></div></section>
<section>hogehoge</section>
</div>
table-cellを使った高さの自動調整という解決には至らないのですが、sectionタグの中にdivを入れてインラインで横幅と高さのスタイルを指定してあげることで対処することにしました。
多分GoogleMapの読み込みの都合上だと思うのですが、このケースだとインラインスタイルじゃないとスタイルが適用されませんでした。
display:table-cellを指定したsectionタグに直接インラインでスタイルを書いてもダメで中にdivか何かを入れて書かなければならない点に要注意です。
結局のところ、この方法を使うならtable-cellを諦めてdivをfloatか何かで横並びにして高さを合わせたい側のdivの高さをJavaScriptで取得してもう一方（例でいうところの#map）に適用したほうが自動調整ができて良い気が・・・。
今回はあくまでtable-cellでどうにかならんのか、ということだったんですけどね。
この問題について色々と解決方法を探ったのですが、私が調べた範囲ではやはりIEでtable-cellのセル高さの可変に合わせて、というのが難しいようです。
IEの絶滅はまだですか・・・。