浏览器移动端html右边有一点白_html页面，在浏览器中突然出现右边空白一块，怎么回事？...

刚好写了一篇文章是关于这个问题的，希望可以帮到大家。

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

body, html {

overflow-x: hidden;

}

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

一个方便的CSS调试工具

最佳的解决方法是使用一个CSS调试工具来把出问题的元素揪出来。因为知乎专栏没法放链接，你可以访问 http://greyli.com/ghost.html ，点击页面第二行的链接(Click me……)，然后看看发生了什么……

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

使用方法

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

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

很神奇吧？(不用担心，刷新一下，页面就会恢复正常)

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

* {

background: #000 !important;

color: #0f0 !important;

outline: solid #f00 1px !important;

}

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

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

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