text-indent 在 IE8+ 和现代浏览器中通用，前提是 DOCTYPE 正确、元素为块级且不在怪异模式；IE6 起即支持，但 Quirks Mode 下可能失效或错位。
text-indent 在 IE8+ 和现代浏览器里是否真能通用
能，但前提是 DOCTYPE 正确且元素是块级。text-indent 从 IE6 就开始支持，IE8+ 完全可靠——只要没掉进怪异模式。一旦 HTML 开头有 BOM、空格或注释，IE/Edge Legacy 会直接切到 Quirks Mode，此时 text-indent 可能被忽略、计算错位，甚至和 margin 行为混在一起。
验证方法很简单：打开 Chrome DevTools → Elements 面板顶部看渲染模式，显示 Standards 才算过关；显示 Quirks 就得立刻检查源码第一行。
- 确保
独占首行，前面零字符（包括 UTF-8 BOM） - 避免用
或带 PUBLIC 的旧声明，现代浏览器反而解析不稳定 - 如果项目还要兼容 IE8–IE11，语义标签如
<section></section>必须手动加display: block，否则它们被当 inline 处理，text-indent直接失效
为什么 Chrome/Firefox 看着正常，Safari iOS 上缩进却“忽大忽小”
这不是 bug，是 Safari 对可访问性的主动适配：当用户双指放大页面时，它会把 em 和 rem 当作绝对尺寸重算，导致缩进值跳变。而 ch 单位在 Safari 中至今不支持（截至 2026 年 10 月），所以写 text-indent: 2ch 在 Safari 里等于没写。
实操建议优先用 2rem，前提是根字体稳定（比如全局设 html { font-size: 16px; }）；若必须响应式又兼顾 Safari，可退一步用 2em，再配合 @media (min-resolution: 2dppx) 做微调——但多数项目不值得为这一个点加 JS 检测。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 别用
20px或32px：高 DPI 屏下缩进过窄，用户缩放后更难读 - 慎用
2%：按父宽计算，窄屏下可能只剩几像素，视觉上等于没缩进 - 移动端上线前务必真机测试：iOS Safari + Android Chrome 的渲染差异比桌面端明显得多
富文本输出的
标签缩进失效，怎么快速定位冲突点
富文本编辑器（如 TinyMCE、CKEditor）导出的 HTML 常带内联样式，比如 <p style="text-indent: 0 !important;"></p>，它会直接覆盖你写的外部 CSS。这时候开发者工具的 Computed 标签页里，text-indent 最终值可能是 0px，但你找不到源头。
最快排查路径：右键目标 <p></p> → “Inspect” → 左侧 Styles 面板里逐条点开每个规则，重点看带 [style] 的那一行，以及有没有 !important 覆盖；再切到 Computed → 搜索 text-indent，确认最终生效值。
- 后端清洗最彻底：导出前 strip 掉所有
style属性，或只保留白名单 CSS - 前端兜底可用
p[style] { text-indent: 2em !important; }，但仅限紧急修复，长期维护成本高 - 注意
<pre class="brush:php;toolbar:false;"></pre>和<code>会继承外层text-indent，需显式重置：pre, code { text-indent: 0; }
表格里的 为什么加了 text-indent 没反应
<td> 默认是 <code>display: table-cell，它的内容盒行为和普通块级元素不同：单行未换行时，浏览器可能不生成明确的“首行盒”，text-indent 就无处作用。再加上 text-align: center 或 right 会把缩进后的文字再拉回原位，看起来完全没动。
更麻烦的是，有些富文本输出或 CSS-in-JS 库会给 <td> 注入 <code>text-indent: 0 !important，比你写的样式权重还高。
- 首选方案：
td { padding-left: 2em; } —— 不依赖行盒，兼容所有表格模式
- 若需语义准确（比如导出 PDF 时保留首行缩进逻辑），用包裹：
<td><div style="text-indent: 2em;">内容</div></td>
- 避免对
<td> 直接写 <code>display: block：会破坏表格布局，尤其跨行 rowspan 场景下容易错位
真正容易被忽略的是混合场景：比如一个 <p></p> 里既有富文本插入的图标（display: inline-block），又有手写文字，text-indent 只作用于纯文本开头，遇到图标就停——结果是文字缩进了，图标还在左边缘。这种问题没法靠统一 CSS 解决，得具体结构具体分析。
<td> 默认是 <code>display: table-cell，它的内容盒行为和普通块级元素不同：单行未换行时，浏览器可能不生成明确的“首行盒”，text-indent 就无处作用。再加上 text-align: center 或 right 会把缩进后的文字再拉回原位，看起来完全没动。
更麻烦的是，有些富文本输出或 CSS-in-JS 库会给 <td> 注入 <code>text-indent: 0 !important，比你写的样式权重还高。
- 首选方案：
td { padding-left: 2em; }—— 不依赖行盒，兼容所有表格模式 - 若需语义准确（比如导出 PDF 时保留首行缩进逻辑），用包裹：
<td><div style="text-indent: 2em;">内容</div></td> - 避免对
<td> 直接写 <code>display: block：会破坏表格布局，尤其跨行rowspan场景下容易错位真正容易被忽略的是混合场景：比如一个
<p></p>里既有富文本插入的图标（display: inline-block），又有手写文字，text-indent只作用于纯文本开头，遇到图标就停——结果是文字缩进了，图标还在左边缘。这种问题没法靠统一 CSS 解决，得具体结构具体分析。
