移动端富文本图片和表格错位溢出的根本原因是展示层缺乏响应式约束。需统一设置img{max-width:100%;height:auto;display:block;float:none!important}，表格外层加overflow-x:auto容器并配合table-layout:fixed与显式列宽控制。
移动端富文本内容里图片和表格错位、溢出、堆叠，根本不是内容本身的问题，而是展示层缺少对响应式行为的主动约束。直接套用编辑器输出的原始 HTML，在小屏上必然崩。
图片不缩放、撑破容器怎么办
富文本中图片常带内联 width 和 height，或没设任何尺寸，浏览器按原始像素渲染，一到手机就横向滚动或截断。
- 统一给所有富文本容器（如
.content或.tinymce-output）加img { max-width: 100%; height: auto; display: block; }——display: block消除 inline 元素默认基线留白，防止底部多出空白 - 禁用
float：富文本可能含float: left图片，必须重置：img { float: none !important; }，否则会脱离文档流，导致后续段落上移或换行错乱 - 长图/横图需强制裁剪时，改用
object-fit: cover+ 容器固定宽高，但要慎用——它会丢内容，优先考虑缩放
表格在手机上横向溢出、文字挤成一团
桌面端生成的表格几乎都依赖内容自适应列宽，table-layout: auto 是罪魁祸首。移动端必须夺回控制权。
- 外层加滚动容器最稳妥：
<div class="table-wrapper"><table>...</table></div>，然后设.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } - 真要让表格“自适应”，必须组合三要素：
table { width: 100%; table-layout: fixed; }+ 所有th, td设显式宽度（百分比）+font-size降为14px或更小 - 避免对
th或td使用white-space: nowrap，它会让长文本顶破列宽；改用word-break: break-word或overflow: hidden; text-overflow: ellipsis;
富文本嵌套结构导致图文混排错位
TinyMCE、CKEditor 等输出的 HTML 常含多层 <p><span><img></span></p>，这种结构在 flex/grid 下极易因 min-width: auto 被撑开，造成图片右漂、文字换行失效。
立即学习“前端免费学习笔记（深入）”；
- 对富文本根容器设
min-width: 0，这是关键——它允许内部 flex 项收缩，防止长 URL 或未断行文本卡死布局 - 若用 flex 布局图文并列（如图左文右），必须给图片父元素（如
<span>）设flex: 0 0 auto，不能让它参与伸缩 - 检查是否有
vertical-align: middle类样式残留，它在 flex 容器里无效，却会干扰 inline-level 元素的基线对齐，统一清掉
最易被忽略的是：富文本内容往往没包裹在语义化容器里，而是直接插入 <div id="article"> 这类无样式的空壳。一旦漏掉 max-width、padding 或 box-sizing 控制，再好的图片/表格规则也会失效。务必确认富文本输出区域本身已受控——它不是“内容终点”，而是“样式起点”。
