code标签在旧浏览器中不显示样式，因其是纯语义标签且无默认样式，ie8及更早版本甚至忽略其存在；需手动添加css（如font-family: monospace）并验证dom中是否真实存在该元素。

为什么 code 标签在旧浏览器里不显示样式

因为 code 是纯语义标签，本身没有默认样式；IE8 及更早版本甚至会忽略它的存在，直接当普通内联文本渲染。它不等价于 <pre class="brush:php;toolbar:false;"></pre> 或 <tt></tt>，后者在老浏览器中有更强的样式继承行为。

必须手动加 CSS 才能生效

所有主流旧浏览器（IE6–IE9、Firefox 3.6、Safari 5）都不会给 code 自动套等宽字体或背景色。你需要显式声明：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

code {
  font-family: monospace;
  font-size: 1em;
}

• 不要只写 font-family: Consolas —— 它在 XP 系统的 IE8 下根本不存在，得 fallback 到 monospace
• 避免用 background-color 或 padding：IE6–IE7 不支持内联元素的 padding，会导致换行错乱
• 若需块级表现（比如多行代码），必须包一层 pre，不能只靠 code

IE6–IE8 下 code 标签会被“吞掉”或丢失

这是 HTML 解析器 bug：当 code 出现在某些上下文（如 p 内嵌套 code 再嵌套 span）时，IE8 及以下可能丢弃整个 code 元素，DOM 中完全找不到。

• 验证方式：打开 IE8 开发者工具（F12），切到“HTML”面板，搜索 code，看是否出现在 DOM 树中
• 临时修复：用 document.createElement('code') 在 中提前注册该标签（HTML5 Shiv 的原理）
• 更稳妥方案：改用 tt（已废弃但 IE 全系支持），或统一用 span class="code" + CSS 模拟

用 Modernizr 检测 code 是否被识别

不能靠 UA 字符串判断，要实测 DOM 行为：

if (!('code' in document.createElement('div'))) {
  // IE6–IE8 进入这里，可加载 polyfill 或降级样式
}

• 这个检测比 document.querySelectorAll('code') 更可靠，后者在 IE8 下可能返回空但标签仍存在
• 如果项目已引入 Modernizr，它会在 上加 code 类名（如 html.code），可用于条件 CSS
• 注意：Modernizr 本身不修复 code 渲染，只提供检测能力，样式仍需自己补全

旧浏览器对语义标签的容忍度极低，code 的失效往往不是“没写对”，而是“根本没被当成标签”。真正起作用的永远是 CSS 显式声明 + DOM 存在性验证，而不是依赖浏览器默认行为。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！