页面右侧出现空白？试试这个CSS调试器！

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

body, html {
    overflow-x: hidden;
}

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

调试工具

最佳的解决方法是使用一个CSS调试工具来把出问题的元素揪出来。你可以访问这个页面，点击页面第二行的链接（Click me……），然后看看发生了什么……不用担心，刷新一下，页面就会恢复正常

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

你可以拖拽这个链接到你浏览器的书签栏（或是使用上面提到的Chrome扩展），然后在任一个打开的页面，都可以通过点击这个书签来查看整个页面的元素结构。比如一开始我打开知乎的主页，是这样：

正常的页面

当我点了这个书签，页面就变成了这样：

使用了Ghost CSS后的页面

很神奇吧？

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

* {
    background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important;
}

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

在你的出现右侧空白问题的页面上，你会看到有一个元素一直顶到最右边的边界，修正这个元素就可以彻底的解决问题。这样，一旦页面出现了奇怪的问题时，你就可以通过点击这个书签来检查问题。把它放到你的日常开发工具箱里吧：）