CSS：Mozilla滚动条推送我的元素（包括jsfiddle）

Question

请查看我的jsfiddle中的chrome和amp;在mozilla 。它在chrome中看起来很好，但在mozilla中，滚动条会推动我的li元素。

我能做些什么才能让它在chrome＆amp; amp; Mozilla的？

这是jsfiddle： http://jsfiddle.net/NR9TS/2/

的CSS：

ul {
    width:164px;
    float:left;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height:100px;
    list-style:none;
    margin:0px;
}
li {
    width:80px;
    height:80px;
    background-color:red;
    border:1px solid blue;
    margin:0px;
    float:left;
}

HTML：

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

提前谢谢。

---

在Chrome中：

在Mozilla：

Answer 1

由于不同的系统会以不同的方式呈现滚动条（例如，在用户具有自定义主题的示例中），因此您无法假设滚动条的宽度。我建议查看Getting scroll bar width using JavaScript的答案（这也是一个小提琴）并将结果添加到你的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>