网址列表突然“长高”到 478px，我是这样把问题揪出来的

前两天维护壹导航时，我遇到一个看起来挺吓人的后台问题：“网址”列表突然变形了。

原本一条网址只占正常的一行，出问题后却被拉得特别高。标题、编辑、快速编辑、移至回收站这些文字几乎变成了“一字一行”，一条数据能占掉大半个屏幕。刚看到时，我第一反应是后台 CSS 被插件改坏了，或者某条网址数据里混进了异常内容。

折腾了一圈才发现，真正的原因比想象中简单：后台列表显示的列太多，标题列被挤得太窄，文字不断换行，最后把整行撑到了近 478px。

先确认：这是单条数据异常，还是整个列表都出了问题

我先观察了几条网址，发现并不是只有某一条特别高，后面的记录也有同样的问题。这样一来，“某条数据内容异常”的可能性就比较低了。

接着我检查页面缩放、窗口宽度，以及近期是否改过后台样式。表面上看，行高像是被设置成了一个很夸张的数值，但页面里并没有找到直接写死的 height: 478px。

这时候不能只盯着“高度”看，因为高度很可能只是结果。

用 F12 和 Console 找到是谁把行高撑起来了

我打开浏览器的 F12 开发者工具，在 Console 里检查出问题那一行及其子元素的实际高度。排查时用到的思路大致如下：

[...document.querySelector('.wp-list-table tbody tr').querySelectorAll('*')]
  .map(el => ({
    tag: el.tagName,
    cls: el.className,
    h: el.getBoundingClientRect().height
  }))
  .filter(x => x.h > 100)
  .sort((a, b) => b.h - a.h)
  .forEach(x => console.log(x));

这段示例默认检查列表里的第一条记录；实际排查时，也可以先在开发者工具中选中具体行，再针对那一行检查。

Console 显示，TR 的高度大约是 478.55px，这一行里的多个 TD 也都是相同高度。这说明不是某个单元格被单独设置了 478px，而是整行被其中的内容撑高了。

继续看页面，我注意到左侧“标题”列已经窄得离谱。网址标题和下面的操作链接被强制挤成：

一字一行，像竖排文字一样不断向下延伸。

到这里，问题方向就变了：行高异常只是表象，列宽不足才是真正的原因。

最终定位：自定义列太多，标题列被挤没了

壹导航的“网址”列表不只有 WordPress 默认列，还加入了不少业务字段，例如链接、作者、网址标签、网址分类、阅读点赞收藏、销售数据、评论、内容权限、评分、排序、日期和 XML 站点地图等。

这些列一起显示时，表格可用宽度是有限的。有些自定义列还有自己的宽度规则，浏览器只能继续压缩其他列。最后，最常用的标题列反而只剩下十几像素。

标题和行内操作一旦逐字换行，整行自然就被越撑越高。换句话说：

不是后台坏了，也不是网址数据坏了，而是“列太多”引发的后台表格布局冲突。

用“显示选项”做验证，页面立刻恢复

确认思路后，我点击列表右上角的 “显示选项”，暂时隐藏了几个平时不需要一直盯着看的栏目，例如销售数据、评论、评分和 XML 站点地图。

应用之后，后台马上恢复正常：

• 标题列重新获得了足够宽度；
• 标题和操作链接不再逐字换行；
• 每条网址恢复成正常行高；
• 页面滚动和批量管理也顺手了很多。

这一步也彻底验证了前面的判断。很多时候，最有效的排障方法不是一上来就改代码，而是先做一个改动最小、能够快速证伪的测试。

后续怎么优化更稳妥

目前我采用的是最省事也最稳妥的方案：常用列保留，不常用列通过“显示选项”隐藏。 WordPress 会为当前用户保存这类显示偏好，日常使用已经够了。

如果后面确实需要同时查看所有字段，可以再给 sites 列表页单独加后台 CSS，为标题、链接、标签和分类预留合理宽度，同时把评论、评分、排序等小列压窄。例如：

.post-type-sites .wp-list-table .column-title {
  width: 160px !important;
  min-width: 160px !important;
}

.post-type-sites .wp-list-table .row-actions {
  white-space: nowrap;
}

不过十几列全开时，再大的屏幕也会显得拥挤。相比一味硬撑列宽，我更倾向于先梳理后台的使用场景：列表页只保留高频信息，低频数据放到编辑页或需要时再打开。

另外，后台样式最好放在子主题、专用小插件或代码片段插件中，不要直接修改主题核心文件。这样主题升级后不容易丢失，也方便随时回滚。

这次排查给我的提醒

这次问题最大的误导，是“看起来像行高坏了”。如果一直围绕 height、min-height 去找，很容易越查越偏。

真正有用的线索是：为什么内容会需要这么高的空间？ 顺着这个问题去看，就能发现标题列已经被挤到无法正常排版。

以后再遇到 WordPress 后台列表变形，我会优先检查这几项：

1. 最近是否新增了自定义列或启用了新插件；
2. “显示选项”里是否一次开启了太多栏目；
3. 标题列和行内操作是否出现逐字换行；
4. Console 看到的高度究竟是原因，还是被内容撑高后的结果；
5. 能否先隐藏几列，用最小改动快速验证。

对站长来说，后台偶尔出现这种“看上去很严重”的问题并不可怕。先把现象拆开，再用 F12 验证每一个判断，很多故障最后都能落到一个很具体、也很容易处理的小地方。