页面出现奇怪的布局问题？试试这个CSS调试器！

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

body, html {     overflow-x: hidden; }

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

调试工具

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

使用方法

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

正常的知乎主页

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

很神奇吧？

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

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

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

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

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

把它放到你的日常开发工具箱里吧：）

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

转自：http://greyli.com/white-space-appears-on-the-right-side-of-the-page-try-this-css-debugger/