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/

我不知道你要做什么，但如果你只想要蓝色和红色你可以使用盒子阴影

演示：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/

Answer 2

.main-scroll {
    position: relative;
    border-color: blue;
    border-style:solid;
    width:150px;
    height:150px;
    overflow:scroll;
}

在IE中试试这个

为什么这个CSS代码在使用Firefox和Chrome时在IE 10中不起作用

2 个答案: