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

Question

在Chrome 33.0.1750.146 m中，当一个带有1像素边框和滚动条的div具有分数像素宽度(其中分数部分>= 0.5)，位于另一个具有百分比宽度(<100%)的div中时，右侧边框有时会被隐藏，具体取决于舍入方式。这似乎是因为滚动条的位置和div的右侧被按不同的方向进行了舍入，导致滚动条覆盖了div的右侧一像素。

这是已知的bug吗？还是有解决方法？我在PhpBB模板页面内遇到了这个图形错误，在那里内容居中且宽度自动计算，结果出现了一个---.5像素宽度的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 — 调整窗口大小，观察右边框闪烁/出现/消失。

- Elle

---

有趣。右边框消失似乎只发生在#wrapper的计算宽度为xxx.5px或xxx.75px的情况下。根据我的经验，子像素总是有点小问题（在不同的浏览器/版本上会有不同的结果）。模板中没有将计算宽度四舍五入的可能性吗？ - MysticEarth

如您所见，滚动条仍然存在问题，但是可以使用 outline 来改善一些。示例 - Ruddy

@Ruddy 已经好多了 - 对于我的用户界面来说是一个可接受的解决方案。我注意到我的右边框在全屏 Chrome 中不可见，但没有意识到这与窗口大小有关。 - Elle

@MysticEarth，你知道如何强制一个元素的宽度为整数像素（同时保持自适应大小）吗？ - Elle

遗憾的是，包裹器 div 不是我正在更改的模板的一部分。 - Elle

Answer 1

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

将#wrapper上的margin: auto;替换为padding: 0 12.5%;似乎可以解决此问题。不确定对于您的特定情况来说，具有自动边距有多重要。

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

- Brittliff

---

不行。在缩小窗口的同时重叠仍然发生。:( - Rohrbs

我确信这个曾经有效，但因为时间太久了，也许当时我是错的。一个简单的解决方案似乎是完全删除边框并添加 box-shadow: 0 0 0 1px #000;。根据浏览器支持情况，这可能有助于实现您所需的效果。 - Brittliff

盒子阴影对我很有效。最终我使用了这个评论中建议的outline：https://dev59.com/I33aa4cB1Zd3GeqPZjHf#9KifEYcBWogLw_1bhSmM虽然它在边框外，但对我的目的足够了。 - Rohrbs

box-shadow 对我不起作用，但轮廓线有效，谢谢！ - Bruce

Answer 2

将边框移到父级“div”中即可解决问题。

- Pavel Aslanov

Answer 3

我遇到了类似的问题。我有一个带有滚动条和右侧边框设置为2像素的div，在调整窗口大小时，当滚动条存在时，我只有1像素的边框，没有滚动条时是2像素。

我通过添加3像素的边框并设置：

overflow-y: scroll;

因此，滚动条始终可见，边框始终具有2像素的可见宽度。

- jcubic

Answer 4

您可以通过以下选项来配置滚动条以满足您的需求：

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

.drop::-webkit-scrollbar-track {

}

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

- LandWalker