quotes属性在移动端常不生效，根本原因是渲染引擎限制：Safari iOS仅部分支持且不响应lang切换，Android WebView常忽略该声明；可靠方案是用lang属性配合伪元素硬编码引号字符，并通过JS切换class控制多语言场景。
quotes 属性确实能控制引号的自动插入逻辑，但它的实际可用性在移动端非常有限——多数主流浏览器（包括 Safari iOS、Chrome Android）对 quotes 的支持不完整或存在 bug，尤其在多语言混排、lang 切换、伪元素嵌套等场景下容易失效。
为什么 quotes 在移动端经常不生效
根本原因不是写法错，而是渲染引擎限制：
- Safari（iOS/iPadOS）自 2021 年起才开始部分支持
quotes，且仅对::before/::after中的content: open-quote有效，不响应lang属性切换 - Android WebView（尤其旧版）完全忽略
quotes声明，直接回退到系统默认引号（通常是英文双引号） -
quotes无法作用于内联文本（如<span>），只能配合content: open-quote / close-quote在伪元素中使用 - 当父元素设了
quotes: none或未显式声明，子元素即使设了lang="zh"也不会触发中文引号逻辑
真正可行的替代方案：用 lang + 伪元素硬编码
放弃依赖浏览器自动匹配，改用明确的 lang 属性配合 CSS 选择器手动指定引号字符。这是目前移动端最稳定的做法：
q[lang="zh"]::before { content: "“"; }
q[lang="zh"]::after { content: "”"; }
q[lang="ja"]::before { content: "「"; }
q[lang="ja"]::after { content: "」"; }
q[lang="en"]::before { content: "“"; }
q[lang="en"]::after { content: "”"; }
q[lang="fr"]::before { content: "« "; }
q[lang="fr"]::after { content: " »"; }
注意两点：
立即学习“前端免费学习笔记（深入）”；
- 必须用
q标签（或你自定义的语义化标签如<blockquote lang="zh">），不能只靠类名——lang是唯一被 CSS 引号逻辑识别的原生属性 - 中文引号推荐用 Unicode 字符
"“"和"”"（U+201C / U+201D），避免用 HTML 实体（“），后者在某些 Android 系统上会渲染为方框
需要动态切换语言时，别碰 quotes，用 JS 注入 class
如果页面支持用户手动切语言（比如顶部语言开关），CSS quotes 完全无法响应运行时变更。此时应：
- 移除所有
quotes声明，统一用 class 控制，例如：.lang-zh q::before - 切换语言时，JS 修改
<html>或<body>的class，而非lang属性（避免触发不可控的浏览器行为） - 配套 CSS 写成：
.lang-zh q::before { content: "“"; } .lang-ja q::before { content: "「"; } .lang-fr q::before { content: "« "; }
真正难的不是写对引号字符，而是让它们在各种安卓 WebView、微信内置浏览器、飞书文档嵌入页里都保持一致。硬编码 + class 驱动是最小意外的路径，quotes 属性目前仍更适合桌面端渐进增强场景。
