爲什麼這個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中工作

回答

相關問題