textarea在td中height失效，因表格布局优先级高于其自身样式；须通过table-layout:fixed、td显式设高（height+line-height+box-sizing:border-box+padding:0）、textarea绝对定位或flex布局实现可靠高度控制。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
直接给 关键不是调 <textarea></textarea> 设 height 或 rows 不可靠——它会被表格单元格的渲染规则覆盖，最终高度由 <td> 的 CSS 高度、<code>line-height 和 box-sizing 共同决定。
为什么
<textarea></textarea> 在 <td> 里不听 height 指令
<p>表格单元格默认用 <code>table-layout: auto，浏览器先读内容再算尺寸；<textarea></textarea> 的 height 属性会被 <td> 的包裹容器高度“截断”或“拉伸”。哪怕你写了 <code>style="height: 120px"，只要 <td> 没锁高，<code><textarea></textarea> 就可能被压缩成一行，或撑开整行导致表格变形。
<textarea></textarea> 上的 height 内联样式——它和表格布局冲突，纯属干扰项rows 控制默认高度：字体缩放、zoom、系统设置都会让它错位（比如 rows="4" 在 macOS Safari 下实际可能只显示 3 行）<td> 必须显式设高：用 <code>height + line-height + box-sizing: border-box + padding: 0 四件套，否则 <textarea></textarea> 没有稳定“容器”可依附
<td> 怎么给 <code><textarea></textarea> 提供可靠容器高度
<textarea></textarea>，而是让 <td> 成为一个尺寸确定、不随内容浮动的“盒子”。
<ul><li>给 <code><table> 加 <code>table-layout: fixed —— 否则列宽/行高全靠内容推算，<textarea></textarea> 一输入就顶高整行
<td> 设 <code>height: 100px + line-height: 100px（值相等），再加 vertical-align: middle，确保单行文本居中且不撑高
box-sizing: border-box 和 padding: 0 —— 否则 <textarea></textarea> 的 padding 会额外加在 <td> 高度外，导致溢出或滚动条
<li>如果要支持多行输入，<code><td> 改用 <code>min-height: 100px 而非 height，并配 max-height: 200px + overflow: hidden 防止失控
怎么让
<textarea></textarea> 默认填满 <td> 高度
<p>让 <code><textarea></textarea> 自适应父容器高度，不能靠 height: 100%（表格单元格中 100% 无效），得用绝对定位或 flex 布局。
立即学习“前端免费学习笔记（深入）”；
- 最简方案：给
<td> 加 <code>position: relative，<textarea></textarea>加position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100% - 兼容性更好方案：把
<td> 设为 <code>display: flex; align-items: stretch，<textarea></textarea>设flex: 1; min-height: 0（避免 Firefox 下 flex 子项最小高度卡死） - 务必加
resize: none—— 否则用户拖拽会破坏高度逻辑，尤其在 Chrome 中拖完后scrollHeight计算失真 - 别忘了
box-sizing: border-box在<textarea></textarea>上也得写，否则边框和内边距会突破容器 - input 事件中重设高度前，必须先执行
textarea.style.height = 'auto'—— 否则旧 height 值会污染scrollHeight计算，iOS Safari 尤其明显 - 不要在
<tr> 上设 <code>height并期望控制<textarea></textarea>高度——Chrome 完全忽略，Firefox 表现不可控，标准不支持 - 如果表格用了
colgroup或col，确保列宽固定（如<col width="200">），否则table-layout: fixed下文字换行位置飘移，间接影响<textarea></textarea>视觉高度 - IE11 需单独处理换行符：用
value.replace(/\r\n/g, '\n')再计算scrollHeight，否则回车后高度虚高
动态自适应场景下容易漏的坑
如果后续还要让 <textarea></textarea> 随输入内容自动撑高（比如编辑态切换），初始高度只是起点，JS 逻辑必须和表格布局协同。
真正难的不是写几行 CSS，而是理解表格渲染机制对子元素的约束力——<textarea></textarea> 在表格里从来不是独立个体，它的高度永远是 <td>、<code><tr>、<code><table> 三层布局博弈的结果。漏掉任意一层的控制，都会在某个浏览器或某种输入下突然失效。</table>
