internet-explorer - IE 10 での display:table-cell 内の div の配置

Question

IE7、8、FF、WK がすべて期待どおりにレンダリングするもので IE9-10 が窒息している理由を理解しようとしています。

「テーブルセル」の固有の高さを正しく尊重するようにIE 9-10を取得するためのトリックはありますか? (重要な注意: さまざまな理由により、「セル」div で height:100% を使用できません。)

http://jsfiddle.net/swortis/fCn8Y/

HTML:

<div class="table">
  <div class="row">
    <div class="cell">
      <div class="wrapper">
        <div class="content"></div>
      </div>
    </div>
  </div>
</div>

CSS:

    <style>

      html,
      body {
        height: 100%;
        margin: 0;
      }

     .table {
       display:table;
       height: 100%;
       width: 200px;
     }

    .row {
      display: table-row;
      }

    .cell {
      display: table-cell;
      vertical-align:top;
      }

    .wrapper {
      display:table;
      position: relative;
      height: 100%;
      width: 100%;
      }

   .content {
      position: absolute;
      background: red;
      width: 100%;
      height: 100%;
    }

  </style>