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 に答える