html - スクロールバーによる Firefox/Chrome の配置の違い

Question

私が直面している問題に対する簡単な CSS 修正があるかどうか知りたいです。コンテナの幅を決定する際に Firefox/OSX がスクロールバーの幅を含めているように見え、コンテンツが正しく右揃えされていません ( http://d.pr/i/fACK )。Chrome/OSX は期待どおりに機能しており、スクローラーの幅を無視し、コンテンツを正しく配置します ( http://d.pr/i/q02g )。ボックスのサイズ変更などをいくつか試しましたが、うまくいきませんでした。

Chrome/Safari と Firefox の両方で問題を確認できる JS Fiddle を作成しました。

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;
}