CSS: Mozilla scrollbar подталкивает мои элементы (jsfiddle included)

Question

Пожалуйста, посмотрите на мой jsfiddle как на хром & в mozilla. Он отлично выглядит в хроме, но в mozilla полоса прокрутки толкает мои элементы li.

Что я могу сделать, чтобы это работало так же как в хромированном & 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

Поскольку различные системы будут оказывающими скроллбары по-разному (например, в примере, что пользователь имеет собственную тему) вы не можете предположить, ширина полос прокрутки. Я бы предложил посмотреть на ответ 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>