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>

提前谢谢你。

---

在 Chrome 中:

在 Mozilla 中:

Answer 1

由于不同的系统会以不同的方式呈现滚动条(例如在示例中用户有自定义主题)，您不能假设滚动条的宽度。我建议查看 Getting scroll bar width using JavaScript 的答案(也有一个 fiddle )并将结果添加到您的 ul 宽度。

编辑或者如果你想使用纯 css，你可以添加一个包装元素来处理滚动条/溢出。然后将ul的overflow设置为hidden。但是这会非常轻微地裁剪滚动条一侧的图像:

<!-- 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>