为什么这个CSS代码在Firefox 10和Chrome浏览器工作时无法在IE 10中工作

This code在Firefox和Chrome浏览器上运行良好，但在IE 10上运行不正常。蓝色部分未在IE 10上正确布局为什么这个CSS代码在Firefox 10和Chrome浏览器工作时无法在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上无法正常工作以及解决方法是什么？

来源

2014-02-16 mehrandvd

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

我不知道你什么AR Ë试图做的，但如果你只是想要的颜色蓝色和红色，你可以使用的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%; 
}

markup：

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

来源

2014-02-16 10:15:53

感谢您的回答。着色只是为了澄清！你的第一个解决方案似乎没问题，但由于我没有在小提琴中提到的其他一些考虑因素，所以不可能改变这些定位值。除了更换职位之外是否还有其他解决方案 – mehrandvd

问题是还有另一个固定高度的标题行。改变立场绝对腐败大小。由于第一行将具有固定高度，并且第二行将填充剩余区域。 – mehrandvd

这是你的解决方案的链接，与新的行混合在一起：http://jsfiddle.net/8Vu92/6/ – mehrandvd

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

在IE试试这个

来源

2014-02-16 10:15:42 user3313598

谢谢，但我不想固定大小，由于我的情况。 – mehrandvd

为什么这个CSS代码在Firefox 10和Chrome浏览器工作时无法在IE 10中工作

回答

相关问题