q标签需CSS quotes属性配合伪元素才能显示中文引号，根本原因有三：quotes未显式设置、lang属性缺失或错位、父级重置quotes:none；跨浏览器最小可靠配置为三行CSS：q{quotes:"“""”""‘""’";} q::before{content:open-quote;} q::after{content:close-quote;}。
q 标签本身不自动加中文引号，它只提供语义；引号是否出现、用什么符号、嵌套怎么变，全靠 CSS 的 quotes 属性 + ::before/::after 伪元素驱动。没配对的 quotes，或者没声明 lang，就大概率看不到引号——这不是 bug，是规范行为。
为什么 q 在中文页面常不显示引号
根本原因有三个：
-
quotes属性未显式设置：多数浏览器默认值为空或英文双引号，中文环境需手动指定四元组，例如quotes: "“" "”" "‘" "’"; -
lang属性缺失或错位：没写lang="zh"，浏览器按英文处理；写了lang="zh-CN"却在老 Safari 中被忽略，推荐统一用lang="zh"并设在上 - 父级重置了
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="WWF"或cite="#section1"都无效 - 屏幕阅读器可能读出 “quote from example.com” 这类提示
- 搜索引擎可据此识别引用来源，增强内容可信度
- 想让用户点击出处？得自己套
<a href="..."></a>，cite本身不渲染任何东西
最容易被忽略的是混排场景：中英文段落共存时，q 的引号必须靠 :lang(zh) q 和 :lang(en) q 分别控制，浏览器不会根据文本内容自动切换——它只看元素自身的 lang 属性或最近祖先的声明。
