CSS文本和框阴影导致滚动条出现？答案

【问题标题】：CSS text and box shadows causing scrollbar to appear?CSS文本和框阴影导致滚动条出现？
【发布时间】：2017-11-02 21:48:42
【问题描述】：

我一直在努力解决这个问题。

我正在创建一个个人网站，并且我正在使用动画画布元素作为背景（通过 jquery 动画）。问题似乎是悬停时锚标记的文本和框阴影导致我的画布元素显示垂直滚动条，并且仅在 Chrome 中发生。

如果我删除了文本和框阴影，或者如果我删除了画布元素，那么问题就会消失。我已经尝试在几乎所有内容中添加溢出：隐藏，但无济于事。

在这里查看我的网站：http://www.trunker.me

#mainMenu a:hover , #mainMenu a:active {
    color: rgba(255,0,0,1);
    box-shadow: 0px 0px 5px 2px rgba(255,0,0,1);
    border-radius: 20px;
    text-shadow: 0px 0px 5px rgba(255,0,0,1);
}

提前致谢！

编辑：使用 Windows 7 Ultimate 和 Chrome 版本 36.0.1985.125 m。它在浏览器滚动条旁边创建第二个垂直滚动条。截图在这里：screenshot http://www.trunker.me/images/Capture.PNG

【问题讨论】：

您目前使用的是哪个操作系统和 Chrome 版本？可以发个截图吗？
谢谢亚历克斯。更新了信息和屏幕截图。
我注意到您在几个元素上应用了溢出：滚动，这是为什么呢？
是的，你应该删除那些 :) 尝试在控制台上覆盖它，看看会发生什么
Alex，我想你刚刚解决了我的问题。我修改了boilerplate.css，去掉了溢出滚动，问题似乎解决了。

标签： html5-canvas css

【解决方案1】：

从代码中的多个元素中删除所有 overflow:scroll。尝试直接在控制台中覆盖它们。

【讨论】：

gah，我为此苦苦挣扎了一段时间！没想到要检查样板。谢谢！！！
No prob Mike，很高兴为您提供帮助 :) 我建议您始终使用浏览器控制台进行调试，并检查计算的 css 属性，包括继承的属性 :)