CSS滾動IE10和Chrome

Question

我有一個小代碼，但它在Chrome（看起來不錯）和IE之間運行如此不同。 在鉻上滾動只是顯示足以看到所有的divs。在IE瀏覽器上有CSS容器內部的大小。

有點愚蠢，但在這種情況下，IE10工作得更好，但我喜歡Chrome風格。

http://jsfiddle.net/VpZ8C/

有人知道我怎麼能解決這個問題？

<div class='container-outer' style="-ms-overflow-style:auto;"> 
    <div class='container-inner'> 
     <div class="box">1</div><div class="box">2</div> 
     <div class="box">3</div> 
     <div class="box">3</div> 
    </div> 
</div> 
<style> 
.container-outer { 
    overflow-x: auto; 
    width: 855px; 
    height: 250px; 
    -ms-overflow-style: auto; 
    border: 1px solid black; } 
.box { 
    width: 250px !important; 
    border: 1px solid #ddd; 
    height: 150px; 
    float: left; 
} 
.container-inner { width: 2500px; } 
</style> 

Answer 1

你爲什麼不使用使用百分比，而不是固定的邊界，或使用盒大小（http://css-tricks.com/box-sizing/）
例1容器的相對擺放：

#container { 
    position: relative; 
    width: 80%; 
    } 

    #header { 
    position: relative; 
    height: 50px; 
    padding: 10px; 
    } 

例2：（採用箱選型）

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 

    /* Since this element now uses border-box sizing, the 10px of horizontal 
    padding will be drawn inside the 80% width */ 
    width: 80%; 
    padding: 0 10px; 
    }