Chrome/Windows下div与垂直滚动条间1px红色边框成因咨询

嘿，我来帮你拆解这个问题——这个红线确实挺让人困惑的，毕竟按常理容器和滚动条应该是完全贴合的对吧？

核心原因：Chrome全屏渲染的像素偏差 + Windows滚动条特性 #

这个红线不是你的代码写错了，而是Chrome在Windows平台全屏模式下的一个渲染细节bug，结合Windows滚动条的特性导致的：

1. Windows上的Chrome默认用的是非覆盖式滚动条——也就是说滚动条会占用容器的实际宽度，而不是像Mac那样悬浮在内容上。
2. 当你进入全屏模式时，Chrome的窗口尺寸计算会出现1px的微小偏差：容器（也就是你的#popup）的宽度被计算为刚好填满屏幕，但滚动条的宽度渲染时没有完全对齐容器的右边缘，导致容器背景色（你这里是红色）从那1px的间隙里透出来，看起来就像一条红线。

简单说就是：全屏时Chrome没算准滚动条和容器的贴合度，漏了1px的容器背景。

怎么验证这个结论？ #

你可以快速做几个测试确认：

• 把#popup的背景色改成绿色，那条线会变成绿色——这直接证明是容器背景露出来了，不是滚动条自带的边框。
• 退出全屏模式，红线立刻消失——说明这是全屏特有的渲染问题。
• 给#popup加个overflow:hidden，红线也会消失——进一步锁定是滚动条相关的渲染偏差。

关于你找到的解决方法（Note2） #

不管你用的是margin-right:-1px、padding-right:1px还是自定义滚动条样式，本质都是填补那1px的间隙：要么让容器稍微宽一点盖住间隙，要么让滚动条的渲染完全覆盖容器边缘。比如自定义滚动条的话，你可以给#popup::-webkit-scrollbar设置width:17px（Windows Chrome默认滚动条宽度），再给::-webkit-scrollbar-track设置和容器背景一致的颜色，也能解决问题。

内容的提问来源于stack exchange，提问作者Basj