css - Chrome 滚动条与 div 边框重叠 1 像素

Question

在 Chrome 33.0.1750.146 m 中，当带有 1 像素边框和滚动条的 div 在另一个具有百分比宽度 (< 100%) 的 div 中具有小数像素宽度(小数部分 >= 0.5)时，边界的右侧有时会隐藏，具体取决于四舍五入。出现这种情况似乎是因为滚动条的位置和 div 的右侧向不同的方向倒圆 Angular ，导致滚动条与 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;。根据您的浏览器支持要求，这可能有助于实现您的需求。

在 #wrapper 上用 padding: 0 12.5%; 替换 margin: auto; 似乎可以解决这个问题。 不确定 margin 自动对您的具体情况有多重要。

<德尔> http://jsfiddle.net/zHh4c/7/