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;。根据您的浏览器支持要求，这可以帮助您实现所需。

~~在#wrapper上用margin: auto;替换padding: 0 12.5%;似乎解决了这个问题。不确定保证金自动对您的特定情况有多重要。~~

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

Answer 2

我有类似的问题。我有滚动条和边框右边设置为2px的div，当我调整窗口大小时我有滚动条或者没有结果我在滚动条打开时有1px边框而在没有滚动条时有2px。

我通过添加3px边框并设置：

来修复它

overflow-y: scroll;

因此滚动条始终可见，边框始终为2px可见宽度。

Answer 3

将边框移至父级“ div”，它将起作用。

Answer 4

您可以通过以下选项配置滚动条：

.drop::-webkit-scrollbar {
  width: 12px;
}

.drop::-webkit-scrollbar-track {

}

.drop::-webkit-scrollbar-thumb {
  background-color: #d6d3d3;
  border-right: .5px solid orange;
}

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

4 个答案: