Firefox / Chrome与滚动条的对齐方式差异 [英] Firefox/Chrome alignment differences with Scrollbar

问题描述

我很好奇我是否遇到了一个简单的CSS修复程序。确定容器宽度时，Firefox / OSX似乎包含其滚动条的宽度，并且未正确正确对齐内容（ http://d.pr/i/fACK ）。 Chrome / OSX可以正常运行，并且忽略了滚动条的宽度，并正确对齐了内容（ http： //d.pr/i/q02g ）。我尝试了一些类似上浆的操作，但是没有运气。

I'm curious if there's a simple CSS fix for an issue I'm running into. It looks as though Firefox/OSX is including the width of it's scrollbar when determining the container width, and doesn't correctly right align the content (http://d.pr/i/fACK). Chrome/OSX is working as I'd hope, and ignores the width of the scroller, and correctly aligns the content (http://d.pr/i/q02g). I tried a few things like box-sizing and such, with no luck.

我创建了JS小提琴，您可以在Chrome / Safari和Firefox上查看该问题。

I've created a JS Fiddle, where you can review the issue on both Chrome/Safari and 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;
}

推荐答案

我遇到了这个问题。使用了此解决方案=> http：/ /css-tricks.com/eliminate-jumps-horizo​​ntal-centering-by-force-a-scroll-bar/

I had this problem. Used this solutions => http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/

这篇关于Firefox / Chrome与滚动条的对齐方式差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！