页面右侧出现空白?试试这个CSS调试器!

# 更新(2017/9/20)

如果你使用Chrome浏览器,那么可以试试这个GhostPage扩展。

 

很多新手在写CSS会遇到很多问题,比如发现页面右侧出现了很多空白。你在网上搜索了之后,发现使用这行代码可以解决:

但是虽然滚动条被隐藏了,问题并没有解决,你还是不知道是哪个元素在作怪。而且,隐藏了x向的滚动条会导致很多副作用,比如缩小浏览器后无法滚动。

调试工具

最佳的解决方法是使用一个CSS调试工具来把出问题的元素揪出来。你可以点击页面右侧的工具箱下的Ghost CSS,然后看看发生了什么……不用担心,刷新一下,页面就会恢复正常。

使用方法

你可以拖拽工具栏里的Ghost CSS到你浏览器的书签栏,然后在任一个打开的页面,都可以通过点击这个书签来查看整个页面的元素结构。比如一开始我打开知乎的主页,是这样:

知乎主页

正常的知乎主页

当我点了这个书签,页面就变成了这样:

使用了Ghost CSS后的页面

使用了Ghost CSS后的页面

很神奇吧?

其实原理很简单,只是在页面的CSS文件里加入了这几行代码:

更改所有元素的背景,颜色和边框(你可以通过修改书签的链接内容来自定义颜色)。

在你的出现右侧空白问题的页面上,你会看到有一个元素一直顶到最右边的边界,修正这个元素就可以彻底的解决问题。

这样,一旦页面出现了奇怪的问题时,你就可以通过点击这个书签来检查问题

把它放到你的日常开发工具箱里吧:)

方法来自:Debug Ghost CSS Elements Causing Unwanted Scrolling

页面右侧出现空白?试试这个CSS调试器!》上有1条评论

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*

*