所在位置：
首页 >
营销资讯 >
网站运营 > html页面，在浏览器中突然出现右边空白一块，怎么回事？
html页面，在浏览器中突然出现右边空白一块，怎么回事？
时间：2024-01-15 19:18:02 | 来源：网站运营
时间：2024-01-15 19:18:02 来源：网站运营
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;}更改所有元素的背景，颜色和边框（你可以通过修改书签的链接内容来自定义颜色）。
在你的出现右侧空白问题的页面上，你会看到有一个元素撑破了页面，一直顶到最右边的边界，修正这个元素就可以彻底的解决问题。
这样，一旦页面出现了奇怪的问题时，你就可以通过点击这个书签来检查问题。
方法来自：Debug Ghost CSS Elements Causing Unwanted Scrolling
原文链接：页面右侧出现空白？试试这个CSS调试器！
在线咨询
