是谁带来了水平滚动条

是谁……带来了水平滚动条，是那圆圆的明月明月，还是那潺潺的山泉山泉？

最近在改版公司博客，调样式的时候发现在一定页面宽度下，窗口底端老是出现水平滚动条。水平滚动条是网页的大忌，因为读者需要横着向右滚然后滚回去然后滚下去然后再向右滚……周而复始。这也是为什么我讨厌电子刊物双栏排版的原因（以前 The R Journal 就是这样的样式）。

我看到的滚动条并不是太夸张，应该是只有某个元素略微超过了页宽，可能只超过了 1 像素，这种情况下就很难用肉眼看出来是哪个元素超宽了。于是放狗搜，找到这篇文章。嚯，这几行 JS 代码真是帅得不要不要的，我一下子就找出了超宽的元素。

超宽的是一条水平线（<hr/>）。这个故事倒是有点意思，因为我设置了水平线的最大宽度是 100%，理论上不应该超宽，但可能是因为我设置了样式是虚线的缘故，浏览器在渲染这条线的时候，到了末端可能会略微多出去一点虚线线段（因为虚线的一个线段不能被折断），导致撑破页面。这只是我的猜想，没有去研究验证。

解决方案很简单，告诉浏览器这个元素的大小应该由它的外边框决定即可：

hr {
  box-sizing: border-box;
}

这样，100% 宽度的意思就是算上外边框，一共宽度是 100%，所以这个元素再也逃不出如来佛的手掌心。

赞赏

作为一名没有固定工作的自由职业者，我非常感谢您通过捐赠的方式来支持我的写作和开源软件开发。当然，捐赠纯属自愿。无论金额多少，都是一片诚挚的心意。支付方式如下：

微信	← 奋力支开它俩 →	支付宝
	其它爱心通道 ↓ Venmo: @yihui_xie Zelle: xie@yihui.name PayPal: xie@yihui.name

若使用 Venmo/Zelle/Paypal，请添加备注“gift”或“donation”，以免捐赠被视为我的可税收入。若使用 Paypal，支付类型请选 Family and Friends，而不要选 Goods and Services。

在不影响生活的前提下，我会将收到的捐赠以尽量大的比例回馈给开源社区和慈善机构。作为参考，2024-25 年间我共收到约三万美元捐赠，完税后我转手捐出了一万五千美元。