仅加 dir="rtl" 不足以实现可用的 RTL 镜像布局——它只是触发点，不是终点；真正起效需设在 <html> 上、同步 lang 属性，并系统性将 margin-left 等物理属性替换为 margin-inline-start 等逻辑属性。
仅加 dir="rtl" 不足以实现可用的 RTL 镜像布局——它只是触发点，不是终点。真正起效的前提是：必须设在 <html> 上、同步 lang 属性、并系统性替换物理 CSS 属性为逻辑属性。
为什么 dir="rtl" 单独加在 <div> 或 <body> 会出问题
浏览器只在根元素（<html>）带 dir 时才完整启用 RTL 行为：表单光标移动方向、双击选词顺序、滚动条位置、复制粘贴逻辑、屏幕阅读器语音规则等均依赖此信号。局部设置会导致 Safari 光标跳错、Chrome 下 getSelection().getRangeAt(0) 返回反向范围、NVDA 读不出阿拉伯语音调。
-
<body dir="rtl">：表单输入框光标仍从左进，回车后焦点乱跳 -
<div dir="rtl">：嵌套<input>的 placeholder 对齐异常，且无法触发:dir(rtl)伪类 - 正确写法只有：
<html lang="ar" dir="rtl">或<html lang="he" dir="rtl">
哪些 CSS 物理属性必须替换成逻辑属性
所有涉及水平方向的物理属性（left/right、margin-left/margin-right 等）在 RTL 下都会错位。逻辑属性由浏览器根据 direction 自动映射，无需 JS 干预。
- 定位：
inset-inline-start替代left，inset-inline-end替代right - 边距与内边距：
margin-inline-start/padding-inline-end - 文本对齐：
text-align: start（不是left），text-align: end - Flex/Grid：
justify-content: start、grid-template-columns: [rtl] 1fr 1fr→ 自动反转列序 - 避免混用：不要在同一个选择器里同时写
margin-left和margin-inline-start，后者会被忽略
图标、箭头、伪元素如何安全镜像
纯装饰性图标可用 transform: scaleX(-1)，但含文字、数字、语义箭头（如「← 继续」）的必须区分处理，否则破坏可读性。
立即学习“前端免费学习笔记（深入）”；
- SVG 图标：用
[dir="rtl"] .icon-arrow { transform: rotateY(180deg); }，比scaleX(-1)更可控 - 伪元素箭头：
::before { inset-inline-start: 0; }+[dir="rtl"] .dropdown::before { border-inline-start-color: transparent; border-inline-end-color: #000; } - Unicode 符号：用
:dir(rtl)切换内容，例如.btn::after { content: "→"; } :dir(rtl) .btn::after { content: "←"; } - 禁止全局写：
[dir="rtl"] svg { transform: scaleX(-1); }—— 会把「✓」「%」「١٢٣」全镜像
第三方组件库（如 Bootstrap、MUI）的 RTL 适配要点
这些库多数已内置 RTL 支持，但启用方式和生效条件非常具体，漏掉任一环节就会降级为“半镜像”状态。
- Bootstrap：必须引入
bootstrap.rtl.min.css，且<html>同时有dir="rtl"和对应lang，否则栅格列不反转、表单控件图标错位 - MUI / Fluent UI：需在主题配置中显式设
direction: 'rtl'，不能只靠 HTML 的dir—— 它们内部用 JS 读取该值来生成 class 名 - 自定义组件：若用
element.style.left = '20px'动态设位置，应改为element.style.insetInlineStart = '20px'；旧代码可分支判断：el.style[dir === 'rtl' ? 'right' : 'left'] = '20px' - 特别注意：CSS-in-JS 库（如 Emotion）需确认是否启用了
rtl插件，否则marginInlineStart会被编译成空
最常被忽略的是：逻辑属性虽好，但不解决语义翻转。比如「上一步/下一步」按钮在 RTL 下应互换位置，但它们的文本内容、aria-label、键盘导航顺序也得同步调整——这已经超出 CSS 能力范围，得靠组件逻辑兜底。
