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

【问题标题】：Chrome scrollbar overlapping div border by 1 pixelChrome 滚动条与 div 边框重叠 1 个像素
【发布时间】：2014-03-04 09:13:35
【问题描述】：

在 Chrome 33.0.1750.146 m 中，当具有 1 像素边框和滚动条的 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 — 调整窗口大小并观察右边框闪烁/出现/消失。

【问题讨论】：

有趣。只有当#wrapper 的计算宽度为xxx.5px 或xxx.75px 时，右边框才会消失。以我的经验，子像素总是有点错误（各种浏览器/版本上的结果不同）。无法在模板中对计算出的宽度进行四舍五入？
它并没有好多少，因为您可以看到滚动条出现故障但可以使用outline？ DEMO
@Ruddy 已经好多了——这对我的 UI 来说是一个可以接受的解决方案。我注意到我的右边框在我的全尺寸 Chrome 中不可见，但没有意识到它与窗口大小有关。
@JordanTrudgett 我会留意任何可以绕过这个问题的东西。
@MysticEarth 你知道有什么方法可以强制元素的宽度为整数像素（同时保持自动调整大小吗？）

标签： css google-chrome

【解决方案1】：

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

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

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

【讨论】：

不。缩小窗口时仍会发生重叠。 :(
我确信这在某个时候有效，但由于它是很久以前的事了，也许我当时弄错了。一个简单的解决方案似乎是完全删除边框并添加box-shadow: 0 0 0 1px #000;。根据浏览器支持，这可能有助于实现您的需求。
盒子阴影对我有用。我最终使用了outline，正如这条评论中所建议的那样：stackoverflow.com/questions/22167438/… 它在边界之外，但对于我的目的来说已经足够了。
box-shadow 对我不起作用，但 outline 对我有用，谢谢！

【解决方案2】：

将边框移动到父“div”，它将起作用。

【讨论】：

【解决方案3】：

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

我已经通过添加3px 边框和设置来修复它：

overflow-y: scroll;

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

【讨论】：

【解决方案4】：

您可以通过以下选项根据需要配置滚动：

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

.drop::-webkit-scrollbar-track {

}

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

【讨论】：