网站溢出

上周朋友发来一个链接，说他们公司官网崩了。网站溢出我点开一看，网站溢出页面确实加载出来了，网站溢出但整个布局像被人从中间撕开一样——导航栏跑到了屏幕最右边，网站溢出产品图叠在文字上面，网站溢出表单的网站溢出输入框只剩一半。按F12打开控制台，网站溢出没有任何报错。网站溢出再刷新几次，网站溢出有时正常，网站溢出有时错乱。网站溢出这种间歇性的网站溢出视觉崩溃，我管它叫“网站溢出”。网站溢出

溢出不是网站溢出bug，至少不是传统意义上的。它更像一种慢性病。服务器没挂，数据库没锁，CDN也在正常分发。问题出在浏览器渲染那一层——某个元素的宽度被撑爆了，或者某个绝对定位的容器跑出了视口，把整个文档流搅成一锅粥。你打开开发者工具，在Elements面板里一层层剥下去，最后往往停在某个width: 100vw或者min-width: 1200px上。就这一行，让整个页面在1024px的笔记本屏幕上翻了车。

我见过最离谱的一次，是一个电商网站的购物车页面。用户把商品加入购物车，总价那一栏的数字只要超过六位数，整个结算按钮就被挤到屏幕外面去了。你根本点不到“去支付”。那个按钮的父容器用了display: flex，但没设flex-wrap，数字一长，按钮就溢出。开发在27寸显示器上测试，数字随便写，从来没触发过。用户用13寸MacBook Air，买三件家电就中招。这种溢出，本质上是开发环境和用户环境之间的裂缝。

移动端更夸张。你给某个div设了padding: 20px，又设了width: 100%，盒模型一算，总宽就是100% + 40px。在桌面浏览器上，默认box-sizing: content-box，这个div就会比父容器宽出40px，把父容器撑出横向滚动条。很多网站你拿手机横过来看，右边总有一截空白，或者整个页面能左右晃——那就是溢出。晃动的幅度不大，但足够让用户觉得“这网站不太对劲”。

还有字体。中文字体和英文字体混排的时候，行高和字宽经常打架。你设了line-height: 1.5，英文看着舒服，中文就挤成一团。反过来，中文舒展了，英文又散得找不着北。更麻烦的是，有些中文字体在font-weight: bold下会变宽，一个标题本来刚好占满一行，加粗之后最后一个字就掉到第二行，把下面的内容全推下去。这种溢出是动态的，跟用户装了什么字体、浏览器怎么渲染都有关系。你没法在代码里写死。

我自己的博客也溢出过。文章页的代码块用了overflow-x: auto，理论上长代码可以横向滚动。但有一次我贴了一段特别长的命令行，里面有个不换行的URL，结果那个pre标签的宽度直接顶穿了文章容器，把侧边栏挤没了。我盯着屏幕看了半天，才意识到overflow-x: auto只对pre本身生效，但pre的父级如果没设min-width: 0，在flex布局里它还是会撑大。加了一行min-width: 0，好了。就这么简单，但找了两小时。

溢出这件事，说到底是“我以为”和“实际上”之间的差距。你以为容器够宽，实际上用户屏幕更窄；你以为文字不会换行，实际上中英文混排就断了；你以为按钮点得到，实际上它被挤出了视口。每个溢出案例背后，都藏着一个没考虑到的边界条件。而浏览器不会报错，它只是默默地、忠实地把页面画歪。用户看到了，皱个眉，关掉。你甚至不知道发生了什么。

所以我现在写完页面，习惯性做两件事：把浏览器窗口从最大拖到最小，看有没有横向滚动条；再把系统字体调大两号，看布局散不散。这两下子，能逮住八成以上的溢出。剩下的两成，只能等用户来告诉你——如果他们愿意告诉你的话。