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

debugcn 发表于 Dev

Mehrandvd

这段代码在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上正常工作，解决方法是什么？

吉尔达斯·坦博

将#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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。