css - 「height=100%」は IE9 では機能しません

Question

私はこのように定義されたHTMLを持っています。

<div class="a">
     <div class="b" >
         something
     </div>
     <div class="c" >
         <div class="d">
         </div>
    </div>
</div>

また、CSS スタイルは次のように定義されています。

html,body
{
    height:100%;
    width:100%;
}
.a
{
    display:table;
    height: 100%;
    width: 99%;
    background: green;
    padding-top: 10px;
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.b
{
    background: yellow;
    display:table-row;
    padding-bottom: 10pt;
    margin-left: 5pt;
    float: left;

}
.c
{
    background: pink;
    display:table-row;
    height:100%;
    width: 100%;
}

.d
{
    display: block;
    width: 100%;
    height: 100%;
    float: left;
}

Firefox、Safari、Chrome では、クラス「d」の div は、親の div 要素と同じ高さになります。しかし、IE9 では、クラス「d」の div の高さは 0 です。理由を知っている人はいますか。

上記のテストコードのリンクは 次のとおりですhttp://jsfiddle.net/ZDY4P/19/