CSS 滚动 IE10 和 Chrome

Question

我有一个小代码，但它在 chrome(看起来不错)和 IE 之间的工作方式非常不同。 在 chrome 上，滚动条足以显示所有 div。在 IE 上，滚动条的大小为​​ css container-inner。

有点笨，但在这种情况下 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;
    }