Chrome和Firefox渲染不一致主因是引擎容错策略差异：Blink激进修复，Gecko保守暴露问题；pre标签格式失效多因CSS干扰；textarea须用value而非innerHTML读写；HTML格式化影响空白处理。
Chrome 和 Firefox 渲染同一段 HTML 显示不一致
多数时候不是 HTML 写错了，而是浏览器对未闭合标签、省略属性、嵌套不规范的容忍度不同。Chrome（基于 Blink）更激进地自动修复，Firefox（Gecko）相对保守，容易暴露结构问题。
- 常见错误现象：
div里直接塞span或p而没注意块级/行内语义，Chrome 可能“帮你包一层”，Firefox 就原样渲染导致错位 - 使用场景：CMS 输出的富文本、前端拼接字符串生成 DOM、服务端模板混写时最易中招
- 实操建议：用
document.querySelectorAll('*')在两个浏览器里比对节点数量和层级，重点关注innerHTML中有没有意外多出的div或br - 性能影响：自动修复会增加解析耗时，尤其在大量动态插入时，Firefox 表现更稳定但报错更早
pre 标签里换行和空格被忽略或错乱
pre 本该保留格式，但一旦混用 CSS white-space、内联样式、或父容器设置了 font-family 不一致，就会失效。
- 常见错误现象：Firefox 下
pre里中文缩进正常，Chrome 却塌成一团；或者pre外层加了display: flex，直接吞掉所有换行 - 参数差异：
white-space: pre和pre-wrap行为不同——前者不折行、后者允许断行但保留空格；移动端 Safari 对pre-wrap支持略滞后 - 实操建议：给
pre加上font-family: monospace统一基准，并避免用margin替代padding控制内边距（会影响字符对齐）
textarea 的 value 和 innerHTML 混用导致回车丢失
很多人用 innerHTML 读写 textarea，结果换行符在 Chrome 里是 \r\n，Firefox 是 \n，存到后端再吐出来就变成一行。
- 常见错误现象：用户输入两行文字，提交后显示为一行；编辑时内容突然“少了一半”
- 使用场景：表单序列化、富文本编辑器底层 textarea 同步、localStorage 缓存草稿
- 实操建议：永远用
textarea.value读写，不要碰innerHTML；如果必须处理换行，统一用value.replace(/\r\n/g, '\n')标准化 - 兼容性影响：IE11 已不支持
innerText在textarea上的行为，只认value
HTML 自动格式化工具（Prettier / VS Code）输出在不同浏览器里渲染不同
格式化本身不改语义，但会改变空白字符分布——而 inline 元素间的空格、换行，在不同浏览器解析时可能被合并或忽略，间接影响布局。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：Prettier 把
<span>A</span> <span>B</span>格式化成多行后，Chrome 显示有空隙，Firefox 空隙变大甚至换行 - 实操建议：对需要紧贴的
inline元素，用注释消除空白：<span>A</span><!-- --><span>B</span>；或改用display: flex容器控制间距 - 性能影响：格式化后的 HTML 文件体积略增（多了换行和缩进），但 gzip 后差异可忽略；真正影响的是开发者对“视觉一致性”的误判
浏览器对 HTML 的解析从来不是纯语法过程，它夹杂着容错、历史兼容、渲染引擎策略。你看到的“格式化”，只是源码的一层表象；真正起作用的是最终生成的 DOM 树结构和 CSSOM 计算结果。调试时别只盯着美化后的代码，先看 Elements 面板里的实际节点树。
