自建网站右侧出现垂直空白条，如何定位触发的CSS规则？

别慌，这种右侧莫名冒出来的垂直空白条我碰过好多次，给你几个实用的排查思路，一步步来肯定能揪出问题根源：

这是最直接的方法，别靠猜，让工具帮你找：

• 打开网站后按F12（或者右键页面选「检查」）调出开发者工具，切换到Elements面板。
• 按Ctrl+Shift+C（Windows/Linux）或Cmd+Shift+C（Mac）激活元素选择器，把鼠标挪到右侧空白区域，看看有没有元素偷偷延伸到这里——有时候是个隐藏的容器、被忽略的图标在搞鬼。
• 如果直接选不到，试试这个控制台小技巧：在Console面板里输入这段代码，它会给所有元素加上红色边框，谁超出视口一眼就能看见：

  * { outline: 1px solid red !important; }
  

  执行后，哪个元素的红框跑到视口外面，那它就是重点怀疑对象。

针对你提到的navbar问题，重点看这些细节：

• width+padding/margin的坑：有些元素设了width: 100%，再加上左右padding或margin，总宽度就会超过视口。检查这类元素的box-sizing属性，确保它是border-box（这样padding和border会被包含在width里，不会额外撑大元素）。
• 子元素撑大父容器：你的navbar是width: 100%，但看看它的子元素——比如菜单列表、logo，有没有某个子元素的宽度超出了navbar？比如菜单的min-width设得太大，或者图片没做响应式处理，都会把父容器撑出视口。
• 绝对定位/浮动元素：有没有元素用了position: absolute，右边的right值是负数，或者left+width的组合超出了视口？浮动元素没清浮动，也可能导致父容器高度/宽度异常。
• 媒体元素失控：页面里的图片、视频如果没设置max-width: 100%，原始尺寸比视口宽的话，直接就会撑出空白条。

• 看看body或html元素有没有设置overflow-x: hidden？如果之前有这个设置后来不小心删掉了，溢出的内容就会显示出来。反过来，如果某个父元素设了overflow-x: auto，也可能出现不必要的滚动条和空白。
• 有没有自定义的滚动条样式？有时候滚动条的宽度计算错误，也会造成视觉上的空白区域。

你已经回滚了代码但问题还在，大概率是浏览器缓存搞的鬼：

• 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，彻底清除缓存后再看。
• 换个浏览器或者用隐身模式打开，排除浏览器插件、本地存储的影响。

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