Positioning of div inside display:table-cell in IE

问题:

Trying to understand why IE9-10 is choking on something that IE7,8, FF, WK all render as expected.

Is there any trick to getting IE 9-10 to correctly respect the inherent height of a 'table cell'. (Important note: due to a variety of reasons I cannot use height:100% on the 'cell' div.)

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>