标签引号样式因浏览器和lang属性而异，需用CSS quotes属性统一控制；cite属性不渲染，须手动添加链接；IE11以下需手动插入Unicode引号或用span+role降级；短引用用，长引用用。
HTML <q></q> 标签在 Chrome/Firefox/Safari 中表现不一致怎么办
直接说结论：<q></q> 标签本身没有统一的默认引号样式，浏览器按语言环境（lang 属性）和自身策略决定加什么引号，chrome 可能用英文双引号，safari 在中文页里可能用「」，firefox 又可能不同——这不是 bug，是规范允许的行为。
所以别指望它“自动适配中文引号”。真实场景中，如果你要确保引文视觉统一（比如全部用「」或“”），必须显式控制：
- 给
<q></q>设置quotesCSS 属性，例如quotes: "「" "」" "『" "』"; - 确保父元素有正确的
lang值（如lang="zh-CN"），否则部分浏览器（如旧版 Safari）可能忽略quotes - 注意嵌套层级：CSS 的
quotes会按层级自动切换内外层引号，第一对是外层，第二对是内层
为什么 <blockquote></blockquote> 加了 cite 属性却没渲染出处链接
cite 属性只是元数据，浏览器**完全不渲染它**——这是最常被误解的一点。你写 <blockquote cite="https://example.com">…</blockquote>，用户看不到任何链接、文字或图标。
如果真要显示出处，必须手动加 HTML：
- 在
<blockquote></blockquote>内部或下方补充<footer><a href="%E2%80%A6">原文链接</a></footer> - 或者用
<cite></cite>元素包裹作者/来源名（但<cite></cite>也仅是语义标签，无默认样式） - 切勿依赖
cite属性做可访问性保障——屏幕阅读器通常也不读它
IE11 及更老浏览器不支持 <q></q> 的自动引号怎么办
IE11 及以下版本压根不解析 quotes CSS，也不给 <q></q> 加任何引号。这时候靠纯语义标签已失效。
立即学习“前端免费学习笔记（深入）”；
务实做法只有两个：
- 降级为手动插入引号字符：用
「（「）、」（」）等 Unicode 字符，配合aria-label保语义 - 用 JS 动态包裹内容（慎用）：检测
getComputedStyle(el).quotes === "none"后插入 span，但要考虑 SEO 和无 JS 场景 - 更推荐方案：直接放弃
<q></q>，用<span role="quote"></span>+ 手动引号 +aria-roledescription="quote"，兼容性最稳
<q></q> 和 <blockquote></blockquote> 到底该选哪个
关键看内容长度和结构意图，不是看“是不是引用”这种模糊说法：
-
<q></q>专用于**行内短引用**（一句话、几个词），浏览器可自动加引号，适合嵌入段落中 -
<blockquote></blockquote>是**独立块级引用**，语义上表示整段内容来自外部，需另起一行，且应包含完整上下文（比如作者、来源） - 别把长段落塞进
<q></q>：某些浏览器会截断引号、换行错乱；也别把单个词包进<blockquote></blockquote>：破坏语义，影响 SEO 和辅助技术 - 两者都支持
lang属性，但只有<q></q>响应quotesCSS
引号这事看着小，但跨浏览器、跨设备、跨辅助技术时，细节一漏就全盘松动。最稳妥的路径是：明确需求 → 查浏览器支持表 → 用 CSS 或手动字符兜底 → 别信“浏览器会替你做好”。
