q标签不自动显示中文引号，因浏览器默认不查中文引号表，需显式设置quotes四元组（如"“""”""‘""’"）、正确声明lang="zh"，并确保q::before/after生效；嵌套最多可靠两层，cite属性仅影响SEO与无障碍，不渲染内容。
q 标签本身不“自动加引号”，它只是语义标记；引号是否出现、用什么符号、嵌套怎么变，全靠 CSS 的 quotes 属性 + ::before/::after 伪元素驱动。没配对的 quotes，或者没声明 lang，就大概率看不到引号——这不是 bug，是规范行为。
为什么q在中文页面常不显示引号
浏览器默认不查中文引号表，尤其 Safari 和部分安卓 WebView，即使写了 <q>细节决定成败</q>，也可能只渲染纯文本。根本原因有三个：
-
quotes属性未显式设置：多数浏览器默认值为空或英文双引号，中文环境需手动指定四元组，例如quotes: "“" "”" "‘" "’"; -
lang属性缺失或错位：没写lang="zh"，浏览器按英文处理；写了lang="zh-CN"却在老 Safari 中被忽略，推荐统一用lang="zh"并设在<html>上 - 父级重置了
quotes: none：某些 UI 框架（如重置 CSS）会清掉所有引号上下文，子q无法继承，必须在q上重新声明quotes
如何稳定让q显示中文引号
跨浏览器生效的最小可靠配置只有三行 CSS，且必须同时存在：
q::before { content: open-quote; }
q::after { content: close-quote; }
q { quotes: "“" "”" "‘" "’"; }
注意点：
立即学习“前端免费学习笔记（深入）”；
- 不能只写两元组（如
quotes: "「" "」";），Safari 会失效；四元组是底线，第二对用于嵌套 - 别把
quotes写在html[lang="zh"]上指望自动生效——Chrome 支持，但 Safari 不认，必须直接作用于q - IE11 兼容模式下
quotes完全无效，若需保 IE，得降级为q::before { content: "“"; } q::after { content: "”"; }
q嵌套时引号不切换？这是浏览器限制，不是你写错了
理论上 <q>他说<q>先做出来</q></q> 应该渲染为 “他说‘先做出来’”，但实际中：
- Chrome/Firefox 在两级内基本可靠；Safari 常跳过第二层，全部显示为 “”
- 三层及以上（
<q>A<q>B<q>C</q></q></q>）所有现代浏览器都不可靠，引号可能消失或重复 - 调试时执行
getComputedStyle(qEl).quotes，返回空字符串或"\"\" \"\""就说明嵌套逻辑没触发 - 真正安全的做法：最多嵌套两层；三层起改用手动 Unicode 引号，例如 “他说‘她说『快上线』’”
cite属性到底有没有用
cite 属性不控制样式、不插入链接、不弹 tooltip，但它不是摆设：
- 值必须是合法 URL，例如
cite="https://example.com/book#p24"；cite="《设计心理学》"或cite="#ref1"都无效 - NVDA/JAWS 可能播报 “quote from example.com”，帮助听障用户定位来源
- 搜索引擎用它增强引用可信度，但不会因此提升排名
- 如果需要视觉呈现出处，得另加内容：
<q>少即是多</q> — <cite>Dieter Rams</cite>
最易被忽略的其实是语言上下文：同一页面里中英文混排时，<q lang="en">ship it</q> 必须显式带 lang="en"，否则它会跟着父级 lang="zh" 一起套「」，语义和语音全错。
