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

Question

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

我该怎么做才能让这在 chrome 和 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>

先感谢您。

---

在铬：

在 Mozilla 中：

Answer 1

由于不同的系统会以不同的方式呈现滚动条（例如在示例中用户具有自定义主题），因此您不能假设滚动条的宽度。我建议查看使用 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>