为什么公众号预览没问题，进编辑器后格式会乱

这次我专门把公众号发布链里“预览正常、进编辑器后格式变乱”的问题梳理了一遍，也顺手把当前模板做了一轮修复。

结论先说：这类问题很多时候不是文章写得有问题，也不是 Markdown 本身有问题，

而是微信公众平台的富文本编辑器会重新处理你提交进去的 HTML 结构和样式。

所以你在浏览器里看到的效果、工具里预览到的效果、草稿箱里再次打开编辑器后看到的效果，并不一定完全一致。

最容易出问题的，不是标题和段落，而是这三类结构

这次对下来，风险最高的主要有三类：

1. 列表

也就是：

•无序列表

•有序列表

•嵌套列表

如果依赖原生：

•ul

•ol

•li

再配合：

•list-style: disc

•list-style: decimal

•padding-left

这种写法在普通浏览器里往往没问题，但进了公众号编辑器以后，最容易出现：

•圆点没了

•序号错乱

•缩进变化

•行距不一致

•再次编辑时结构被改写

2. 代码块

代码块的问题主要不在“能不能显示”，而在“能不能稳定按原样显示”。

如果代码块依赖：

•横向滚动

•深色背景

•较复杂的嵌套结构

•严格保留原始空白

就容易出现这些问题：

•背景色没了

•字体色丢了

•横向滚动失效

•代码被强制换行或压坏

3. 表格

表格是另一个常见风险点。

尤其当表格里有：

•长文本

•多列

•依赖宽度控制的布局

就容易出现：

•单元格把表格撑坏

•预览正常，最终显示偏掉

•编辑态和手机端效果不一致

为什么会这样

原因很直接：

公众号后台不是一个“原样渲染浏览器”，而是一个会重新接管富文本结构的编辑器。

换句话说，你交进去的是一段 HTML，但微信后台不一定会完整保留：

•标签结构

•CSS 样式

•列表语义

•滚动行为

•一些细节属性

所以真正的问题不是“浏览器兼容性”，而是：

微信编辑器会不会把你的结构再改一遍。

这次查资料后，能明确落地的经验

我查到的资料里，几个结论和我们现在遇到的问题是对得上的。

1. 原生列表确实是高风险区

有现成的公众号排版实践明确提到：

•微信公众号对部分 CSS 样式不支持

•无序列表和有序列表本身就容易出现行距和显示问题

来源：

•HandleHtml 项目 https://github.com/guoshimeihua/HandleHtml

这个资料里甚至直接把两个典型坑写出来了：

•代码块显示不正确

•无序列表和有序列表行与行之间没有空隙

这和我们现在碰到的现象基本一致。

2. 内联 CSS 也不是万能的

另一个做公众号排版的实践里也明确说明：

•常见做法是先生成带内联 CSS 的 HTML

•再把它复制到公众号后台

但这不等于微信就会 100% 保留所有样式。

来源：

•https://elliot00.com/posts/org-to-mp

3. 表格最终效果需要看手机端

第三方公众号编辑器对表格也给了非常现实的提示：

•编辑时可见的效果，不等于最终效果

•表格宽度和布局可能出现偏差

来源：

•96 编辑器帮助文档 https://bj.96weixin.com/help/100013.html

这次我做了什么修改

这次不是只改了一个小样式，而是按“微信兼容优先”的思路做了一次降级处理。

1. 列表不再依赖原生 ul/ol/li

这是这次最核心的修改。

我把 wx_safe 模板里的原生列表，改成了“伪列表段落”：

•不再依赖 ul

•不再依赖 ol

•不再依赖 li

•直接转成普通段落

•前面手动加：

••

•1.

•2.

这样做的好处是：

•微信编辑器就算重写结构，也只是普通段落

•不再依赖它对列表标签的支持程度

2. 修了 Markdown 混合列表被错误合并的问题

我还顺手发现了另一个容易误判的问题：

•有时候“数字列表后面接圆点列表”

•在 Markdown 转 HTML 这一步就已经被错误合并了

这不是微信的问题，而是 Markdown 解析阶段的问题。

所以这次又补了一处：

•给转换器加了 sane_lists

这样可以避免：

•1. 步骤一

•2. 步骤二

•- 要点A

•- 要点B

这种结构在转换成 HTML 时先被合并成一整组错误列表。

3. 代码块改成更保守的展示方式

原来代码块比较依赖：

•overflow-x: auto

•white-space: pre

这在微信编辑器里不够稳。

所以我把它改成了：

•pre-wrap

•自动换行

•减少对横向滚动的依赖

这样虽然牺牲了一点“原汁原味的代码块排版”，但换来了更高的稳定性。

4. 表格改成更保守的固定布局

这次也把表格再收了一层：

•增加 table-layout: fixed

•单元格增加 word-break: break-word

目标不是让表格更花，而是：

•避免长文本把列宽撑坏

•尽量让表格在公众号环境里稳住

这次修完后，我确认下来的结果

我已经实际验证过：

1. wx_safe 转换后的 HTML 已经不再输出原生列表标签

也就是说，当前列表已经不是靠：

•<ul>

•<ol>

•<li>

来撑样式了。

而是直接变成普通段落 + 手工标记。

2. 混合列表现在可以正确区分

比如：

现在转换后会正确变成：

•1. 步骤一

•2. 步骤二

•• 要点A

•• 要点B

不会再被错误并成同一组序号列表。

现在这套经验最适合怎么用

如果你的目标是：

•文章在公众号后台里尽量稳

•草稿保存后再次打开编辑器不要太乱

•正式发布前少返工

那最实用的经验就是这几条：

1.列表不要过度依赖原生列表标签

2.代码块不要过度依赖滚动和复杂背景

3.表格尽量保守，宁可换行，不要强撑

4.样式要优先“稳定”，而不是优先“浏览器里最好看”

最后一条判断标准

以后看公众号模板好不好，不要只看浏览器预览。

更应该看三件事：

1.能不能进草稿

2.草稿再次打开编辑器后会不会乱

3.手机端最终显示稳不稳

如果这三步都稳，那个模板才是真的能用。

附：样式检查区

这一节不是为了讲新内容，而是专门给公众号后台做肉眼检查用的。你可以直接看这一节在：

•草稿箱预览

•再次打开编辑器

•手机端最终展示

这三个阶段是不是一致。

标题样式检查

这是二级标题样式。

这是三级标题样式

这是普通正文段落。这里故意放一段比较常见的说明文字，用来观察段间距、行高、字体大小和手机端阅读节奏是否正常。

正文里也放一个行内代码示例：wx_safe，再放一个路径示例：skills/wechat-article-writer/__init__.py，用来确认行内代码底色和文字颜色会不会失真。

无序列表检查

•第一条无序列表

•第二条无序列表

•第三条无序列表

有序列表检查

1.第一步先生成 Markdown

2.第二步再转换成 HTML

3.第三步发布到公众号草稿箱

嵌套列表示例

1.一级步骤一

2.二级步骤一

3.二级步骤二

4.一级步骤二    – 补充说明 A    – 补充说明 B

引用样式检查

这是一段引用文字，用来观察左侧边线、内边距和颜色在公众号后台里是否稳定。

代码块检查

表格检查

链接样式检查

这里放一个链接，方便确认颜色和下划线是否正常：

OpenClaw 仓库

这是一条分割线。上面这些内容都建议在公众号后台里逐项看一遍，不要只看本地浏览器预览。