css - 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;
    }