Html Firefox/Chrome与滚动条的对齐差异

我很好奇是否有一个简单的CSS修复我遇到的问题。在确定容器宽度时，Firefox/OSX似乎包含了其滚动条的宽度，并且没有正确对齐内容（）。Chrome/OSX的工作方式与我所希望的一样，它忽略了滚动条的宽度，并正确地对齐了内容（）。我试过一些像盒子大小之类的东西，但没有成功

我创建了一个JS提琴，您可以在Chrome/Safari和Firefox上查看这个问题

---

我有这个问题。使用此解决方案=>

IE10似乎也考虑了滚动条，右对齐的文本位于框的右侧：我真的看不出小提琴有什么不同。。。我有什么问题吗？@ExplosionPills，你可能在电脑上。我认为Windows总是添加滚动条。问题是你在

%

中设置了宽度。FF为滚动条保留空间（不覆盖）。Chrome使用系统行为（对于OSX）仅覆盖滚动条。如果使用

%

width，在不同的系统上使用不同的滚动条宽度总是会有问题。@t.niese是的，我想我可以这样做，但这与我想要的正好相反。我的#容器可能会改变宽度，我不想每次都手动设置项目的宽度/高度。这也确实没有解决问题，因为我必须删除UL上的正确填充以使其对齐。

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