如何调试 css 以摆脱滚动条？

Posted 2023-03-06

【中文标题】如何调试 css 以摆脱滚动条？

【英文标题】：How to debug css to get rid of scrollbars?

【发布时间】：2020-11-01 13:49:21

【问题描述】：

我的一个网站 http://ptp.bitplan.com 使用（几乎）相同的 CSS

http://diagrams.bitplan.com http://pi-q-robot.bitplan.com/

在所有情况下，我都会遇到垂直和水平滚动条出现在我不希望它们出现的位置的问题。

我正在使用 firefox 并尝试使用检查器调试情况。

找出哪个元素有我不想要的滚动条的步骤是什么？

参见例如

https://bugzilla.mozilla.org/show_bug.cgi?id=1312146 https://bugzilla.mozilla.org/show_bug.cgi?id=1521712

为什么这是一个问题。

【问题讨论】：

另见github.com/WolfgangFahl/ProceedingsTitleParser/issues/23

为什么我不能右键单击滚动条上的“检查”或类似的东西？

【参考方案1】：

检查每个容器标签“div”或只检查所有标签。一次注释掉一个，看看哪个消除了滚动条。问题出在您的身体标签上... Set margin: 0 !important;在你的 CSS 中作为 body 标签

【讨论】：

感谢您对此进行调查。边距设置有效果但不能解决调试问题。

你能发一个项目的链接或者把 html 和 CSS 代码粘贴到这里吗？

三个链接都在问题中，只需按照每个链接上的 github 链接即可。这些网站大多是最新的代码，包括 css，例如github.com/BITPlan/diagrams/blob/master/web/css/diagrams.css 根据您的提示，我今天早上更改了。

我向您的仓库提出了拉取请求。注意到您在第 16 行省略了一个冒号

谢谢我合并了它。有趣的是，当我测试冒号时，它似乎没有任何区别，所以仅仅省略旧的边距比拥有它们要好。 ptp.bitplan.com 和 diagrams.bitplan.com 已更新，只需在查看它们时刷新浏览器缓存。现在看起来更好了，但调试问题是通过单击检查器从滚动条到相关元素 - 我们现在需要一个新示例 :-(