html - 为什么此 CSS 代码在 Firefox 和 Chrome 上工作时在 IE 10 中不起作用

Question

This code在 Firefox 和 Chrome 上工作正常，但在 IE 10 上不工作。蓝色部分在 IE 10 上布局不合适

我认为问题在于:

.main-scroll {
    position: relative;
    height:100%;
    width: 100%;
    border-color: blue;
    border-style:solid;
    overflow-y: scroll;
}  

它的 height: 100% 似乎无法正常工作。据我所知，所有使用的样式在 HTML 5.0 和 CSS 3.0 中都是有效的。

问题:那么为什么这段代码在 IE 10 上不能正常工作，解决方法是什么？

Answer 1

将#body设置为相对位置

#body {
    height: 100px;
    width: 200px;
    position:relative;/*so that the children can habe an absolute position*/
}

然后

.main-scroll {
    position: absolute;
    height:100%;
    width: 100%;
    border-color: blue;
    border-style:solid;
    overflow-y: scroll;
}

演示:http://jsfiddle.net/8Vu92/3/

我不知道你想做什么，但如果你只想要蓝色和红色，你可以使用 box-shadow

演示:http://jsfiddle.net/8Vu92/4/

<section class="main">
    This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.
</section>

CSS

.main {
    height: 100px;
    width: 200px;
    position:relative;
    overflow:auto;
    border:4px solid blue;
    box-shadow:0 0 0 4px red;
    padding: 10px;
    box-sizing:border-box;
}

更新:使用转换

#body {
    height: 100px;
    width: 200px;
}
.shell {
    height: 100%;
    width: 100%;
    display: table;
    border-color: red;
    border-style:solid;
}

.header-row {
    display: table-row;
    height: 40px
}
.main-row {
    height:100%;
    width: 100%;
    display: table-row;
    border-style:solid;
}
.main-scroll {
    height:120px;
    width: 100%;
    border-color: blue;
    border-style:solid;
    overflow-y: scroll;
    transform:translate3d(0,30px,0);
}
.main {
    display:block;
    height: 100%;
    width: 100%;
}

标记:

<div id="body">
    <div class="shell">
        <div class="header-row">
            This is the fixed height header
        </div>
        <div class="main-row">
            <div class="main-scroll">
                <section class="main">This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.</section>
            </div>
        </div>
    </div>
</div>

演示:http://jsfiddle.net/8Vu92/8/