IE中表格行内的css 100％拉伸表格失败答案

【问题标题】：css 100% stretched table inside a table-row fail in IEIE中表格行内的css 100％拉伸表格失败
【发布时间】：2013-07-11 13:13:33
【问题描述】：

问题：在 IE 中无法在表格行内拉伸表格 100% 的宽度/高度。为什么？！

这是代码 (http://jsfiddle.net/GBsay/2/)：

html:

<body>
    <div id="row">
        <div id="table">
           this table should be 100% width/height, green color<br/>
           It works in ANY browser except IE.<br/>
           WHY?!
        </div>
    </div>
</body>

css:

html, body {
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
body {
    display:table;
}
#row {
    display:table-row;
    width:100%;
    height:100%;
    background:#f00;
}
#table {
    display:table;
    width:100%;
    height:100%;
    background:#0f0;
}

此代码适用于除 IE (7,8,9,10) 以外的所有浏览器。任何人都知道如何仅使用 css 来解决这个问题？

【问题讨论】：

在 7、8、9、10 中测试 - 均无效。所以基本上它在IE中根本不起作用。
如果其他人遇到这个问题，我会遇到完全相同的问题，并通过在父 div（带有 display:table 的那个）上设置最小高度（可以是任何东西，1px）来解决它。

标签： css internet-explorer tablerow stretching

【解决方案1】：

Internet Explorer 的美妙之处，是对许多开发者耐心的考验，但解决方法如下

 
html, body {
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
#table {
    position: relative;
    display:table;
    width:100%;
    height:100%;
    background:lightgreen;
}

body {

}
#row {
    width:100%;
    height:100%;
    position: static;
    display:block;
    background:lightblue;
    text-align:center;
    float: center;
    top:100%;
}

【讨论】：