Различия в выравнивании Firefox/Chrome с помощью Scrollbar

Question

Мне любопытно, есть ли простое исправление CSS для проблемы, с которой я столкнулся. Похоже, что Firefox/OSX включает ширину полосы прокрутки при определении ширины контейнера и неправильно выравнивает содержимое (http://d.pr/i/fACK). Chrome/OSX работает, как я надеюсь, и игнорирует ширину скроллера и правильно выравнивает содержимое (http://d.pr/i/q02g). Я попробовал несколько вещей, таких как размер коробки и т. Д., Без везения.

Я создал скрипт JS, где вы можете просмотреть проблему как в Chrome/Safari, так и в Firefox.

http://jsfiddle.net/jHVMU/2/

#container{ 
    width:600px; 
} 

#content{ 
    max-height: 300px; 
    overflow: auto; 
    padding: 0; 
} 

#content ul{ 
    list-style:none; 
    margin:0; 
    padding: 30px 50px; 
} 

#content ul li{ 
    width:30%; 
    margin:0 5% 15px 0; 
    height:150px; 
    background:#000; 
    float:left; 
} 

#content ul li:nth-child(3n) { 
    margin-right: 0; 
} 

Answer 1

Я имел эту проблему. Использовали эти решения =>http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/