Chrome滚动条重叠div边框1个像素

Question

在Chrome 33.0.1750.146 m中,当具有1像素边框和滚动条的div具有小数宽度(<100%)的另一个div内的小数像素宽度(小数部分> = 0.5)时,右侧边界有时是隐藏的,取决于四舍五入.这似乎是因为滚动条的位置和div的右侧在不同的方向上被舍入,导致滚动条与div的右侧重叠一个像素.

这是一个已知的错误还是有解决方法？我在PhpBB模板页面中遇到了这个图形故障,其中内容居中并且自动计算宽度,这导致了一个--- .5px宽度div,我将其追溯到以下最小可重复样本:

HTML:

<div id="wrapper">
    <div class="box">
        <p>Test content</p>
        <p>Test content</p>
        <p>Test content</p>
        <p>Test content</p>
    </div>
</div>

CSS:

.box {
    height: 100px;
    overflow: auto;
    border: 1px solid;
}

#wrapper {
    max-width: 75%;
    margin: auto;
}

示例JSFiddle - 调整窗口大小并观察右边界闪烁/出现/消失.

Answer 1

编辑：正如下面Rohrbs所指出的，我原来的答案似乎不起作用！一个可能的解决方案似乎是完全删除边框并添加box-shadow: 0 0 0 1px #000;. 根据您的浏览器支持要求，这可以帮助实现您的需求。

替换margin: auto;为padding: 0 12.5%;#wrapper 似乎可以解决此问题。不确定自动保证金对于您的具体情况有多重要。

http://jsfiddle.net/zHh4c/7/