CSS：Mozilla滾動條推動我的元素（包括jsfiddle）

Question

請看看我的jsfiddle在鉻&在mozilla。它看起來很好，但在Mozilla中，滾動條推動我的元素。

我該怎麼做才能在鉻合金& 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>