小技巧 debug 网页 css overflow ，避免出现底部滚动条

一般而言，绝大多数网页都是纵向滚动的，很少有横向滚动的网页。如果一个正常纵向滚动的网页，在浏览器的底部出现了滚动条，是因为这个网页的宽度超出了屏幕宽度。这种情况很多时候并非网站设计者的初衷，而是由于写错了 css 样式。

趣味数学题 - 橘子数学社区 - 趣题挑战原本有这个问题，之后被我解决了。一开始的解决方法比较笨，就是用 Chrome 的开发者工具，一个一个检查元素，看看是哪个元素溢出了。

最近我偶然发现了两个网站有类似的溢出问题：

这就引起了我的好奇，有没有更便捷的技巧 debug 网页的横向溢出呢？答案是有的。使用开发者工具，给网站添加以下样式：

1
2
3

* {
  outline: 1px solid red;
}

这不会影响网页原本的布局，同时还会给所有元素加上边框，这样我们就很容易发现是哪个地方有溢出了。利用这个小技巧，我们也可以更直观的观察一个网站的布局是怎样的。

使用 bookmarklet

我将这一小段 css 代码改成了 bookmarklet ：显示元素边框。

这样只要点击书签就能直接生效了。