code标签本身无兼容性问题，所有浏览器（含IE6）均原生支持；问题多源于pre嵌套换行差异、CSS字体fallback不一致、特殊字符未转义及语法高亮库缺少polyfill。
code 标签本身几乎没兼容性问题
<code> 是 HTML4 就存在的内联语义标签，所有浏览器（包括 IE6）都原生支持，不会被忽略、不会触发解析错误、也不需要 html5shiv。它唯一的作用是告诉浏览器“这段文本是计算机代码”，默认渲染为等宽字体（font-family: monospace），没有额外样式干扰。
真正出问题的，从来不是 <code> 这个标签本身，而是你把它和哪些东西混在一起用：
- 嵌套在
<pre>里时，不同浏览器对换行/空格的保留逻辑略有差异（尤其 IE8–10） - 配合 CSS 自定义
font-family时，某些旧版 Safari 或 Android Browser 对等宽字体族 fallback 处理不一致 - 用
white-space: pre-wrap或word-break: break-all控制长代码行时，IE11 和 Edge Legacy 对break-all的行为和现代浏览器不完全相同
pre + code 组合在 IE 中的换行失效
常见写法：
<pre><code>function foo() { return true; }</code></pre></p>
<p>问题：IE9–11 下，如果 <code><code> 内容超长且无空格，<pre> 的 white-space: pre 默认值会阻止自动换行，导致横向滚动或溢出容器——而 Chrome/Firefox 在类似场景下更倾向软换行。
立即学习“前端免费学习笔记（深入）”；
解决办法不是改 <code>，而是控制 <pre> 的行为：
- 显式加
white-space: pre-wrap或white-space: pre-line到<pre>元素上 - 避免只依赖
<pre>的默认行为；若需严格保留原始缩进+允许换行，用pre-wrap - IE10+ 支持
word-wrap: break-word，可作为后备：pre { word-wrap: break-word; }
code 标签里的特殊字符渲染不一致
比如写 <code><div></code>，意图显示 <code><div> 字符串，但部分老浏览器（如 IE8、Android 2.3 WebView）会把 解析成标签起始，导致 DOM 截断或结构错乱。
<p>这不是 <code><code> 的锅，是 HTML 实体解析时机的问题。安全做法只有两个：
- 服务端输出前，确保所有要显示为文本的 HTML 字符已转义为实体（
, <code>>,&） - 前端 JS 动态插入时，别用
innerHTML直接塞字符串，改用textContent或createTextNode - 不要依赖
<code>自动转义——它不负责这个，也不该负责
语法高亮库在旧浏览器中挂掉，误以为是 code 标签问题
很多项目用 highlight.js 或 Prism.js 给 <code> 加样式。但这些库默认依赖 querySelectorAll、classList、甚至 Promise —— IE11 不支持 Promise，IE10 不支持 classList，直接报错中断执行，结果整段 <code> 原样裸奔。
关键点：高亮失效 ≠ <code> 不兼容。排查顺序应是：
- 先看控制台有没有
undefined is not a function错误（大概率是Promise或classList） - 确认是否加载了对应 polyfill（如
promise-polyfill@8、classlist-polyfill） - 构建时检查 Babel targets 是否包含
ie: "11"，否则 ES6+ 语法会直接让 IE 报错
最常被忽略的是：polyfill 必须在高亮脚本之前加载，且不能靠 async 或 defer 异步引入——否则执行顺序无法保证。
