CSS:Mozilla滚动条推送我的元素（包括JSFIDLE）

请查看我在chrome和mozilla中的JSFIDLE。它在chrome中看起来不错，但在mozilla中，滚动条推动了我的li元素

我该怎么做才能使它在chrome和mozilla中都能正常工作

以下是JSFIDLE：

css:

html:

先谢谢你

---

镀铬：

在Mozilla中：

---

由于不同的系统将以不同的方式呈现滚动条（例如，在本例中，用户具有自定义主题），因此不能假定滚动条的宽度。我建议查看答案（也有一把小提琴），并将结果添加到您的ul宽度中

编辑或者如果你想使用纯css，你可以添加一个包装元素来处理滚动条/溢出。然后将ul的溢出设置为隐藏。但这会在滚动条一侧略微裁剪图像：

<!-- CSS -->
.outerWrap {
    overflow: hidden;
    overflow-y: scroll;
    width: 400px;
    height:50px; 
}
.outerWrap .innerWrap {
    width: 400px;
}
.outerWrap .innerWrap li {
    width: 198px;/* 2px less (one for each left and right border)*/
    background-color: red;
    border: solid 1px blue;
    list-style: none;
    float: left;
    height: 45px;
}

<!-- html -->
    <div class="outerWrap">
        <ul class="innerWrap">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div> 

.外套{
溢出：隐藏；
溢出y：滚动；
宽度：400px；
高度：50px；
}
.外包装.内包装{
宽度：400px；
}
.外套{
宽度：198px；/*2px以下（左右边框各一个）*/
背景色：红色；
边框：纯色1px蓝色；
列表样式：无；
浮动：左；
高度：45px；
}

一,
二,
三,
四,
五,
六,

我不确定我是否理解问题所在，我觉得它们看起来都一样。请再次查看我的问题。我已经包括了@LochemageI的图片，实际上我没有得到你的Chrome结果，我的Chrome在这个例子中看起来就像FireFox。谢谢你的回复。。有没有办法用纯css解决这个问题？我在看pinterest的小部件&不知怎么的，滚动条只是在框上移动&而不是“挤压”它们的内包装/外包装。。有道理。。谢谢：）

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!-- CSS -->
.outerWrap {
    overflow: hidden;
    overflow-y: scroll;
    width: 400px;
    height:50px; 
}
.outerWrap .innerWrap {
    width: 400px;
}
.outerWrap .innerWrap li {
    width: 198px;/* 2px less (one for each left and right border)*/
    background-color: red;
    border: solid 1px blue;
    list-style: none;
    float: left;
    height: 45px;
}

<!-- html -->
    <div class="outerWrap">
        <ul class="innerWrap">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>