q标签不渲染引号的主因是css quotes属性未生效或被重置；需确保quotes正确设置、未被none/initial/all:unset覆盖，且提供足够引号对以支持嵌套，老浏览器应改用伪元素硬编码。
q 标签不渲染引号？先看 quotes 是否生效
浏览器默认会为 <q></q> 插入引号，但前提是 CSS 的 quotes 属性被正确设置且未被重置。很多情况下 <q></q> 看起来“没引号”，其实是 quotes: none 或父元素覆盖了该属性。
-
quotes必须写在作用于<q></q>或其祖先的 CSS 规则里，不能只靠浏览器默认（某些 UA 样式表可能禁用） - 检查是否意外写了
quotes: none—— 尤其在重置样式（如normalize.css或自定义 reset）中常见 - 若父容器设了
quotes: "«" "»" "‹" "›"，子级<q></q>会按嵌套层级自动选对应对，不是固定用第一对
多层嵌套时引号错乱？记住 quotes 是栈式匹配
<q></q> 的引号选择依赖 quotes 值中成对字符串的顺序，每嵌套一层就“进栈”下一对。如果只定义了一对，深层 <q></q> 会 fallback 到第一对或完全不渲染。
- 必须提供至少两对引号才能支持双层嵌套，例如：
quotes: "“" "”" "‘" "’" - 第三层会尝试用第三对（
"‘" "’"），若不足则回退到第一对，而非报错或留空 - 不要指望
lang="zh"自动切换中文引号——除非你显式写了对应语言的quotes规则并配了[lang="zh"]选择器
Firefox 不显示引号？检查是否触发了「无样式文本」降级
Firefox 在某些条件下（如启用了高对比度模式、禁用样式表、或元素被设为 contenteditable 且无焦点）会跳过 quotes 渲染，表现为 <q></q> 内容裸奔。
- 这不是 bug，而是 UA 对可访问性场景的主动降级；可通过强制添加伪元素绕过：
q::before { content: "“"; } - 避免给
<q></q>设display: inline-block或float，这在旧版 Firefox 中可能中断引号生成逻辑 - 若用 JS 动态插入
<q></q>，需确保插入后 CSS 已加载完毕——否则初始渲染可能漏引号，且不会自动补
想兼容老浏览器？别依赖 quotes + <q></q> 的自动行为
IE11 及更早版本完全忽略 quotes，Safari 12 之前对嵌套支持不稳定。真要保底，得接受「语义归语义，视觉归视觉」的分离设计。
立即学习“前端免费学习笔记（深入）”；
- 用
<q></q>保持语义正确性，但视觉引号统一用q::before/q::after伪元素硬编码 - 避免在
quotes中混用全角/半角、直角/弯角引号——不同字体渲染差异大，尤其在 Windows 上宋体 vs 微软雅黑 - 服务端渲染时若预判客户端弱（如邮件模板、微信 WebView），直接输出带引号的 HTML，别赌 CSS 能力
最麻烦的不是写不对，而是改完发现某处 quotes 被 all: unset 悄悄清掉了——这种地方往往藏在第三方组件的 shadow DOM 里，查起来费时间
