3

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

这是代码（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 解决此问题？

4

1 回答 1

2

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%;
}
于 2013-07-11T15:40:37.677 回答