tab-size无效的最常见原因是仅对white-space为pre/pre-wrap/pre-line的元素（如、）生效，普通因white-space:normal而失效；firefox需-moz-tab-size，safari至今不支持；js应避免直接设style.tabsize，推荐预定义css类；且仅渲染已有\t字符，不生成制表符。
tab-size为什么在某些浏览器里完全没反应
最常见原因是样式没生效——tab-size只对 <pre class="brush:php;toolbar:false;"></pre> 或 <textarea></textarea> 这类保留空白符的元素起作用，且前提是它们的 white-space 值为 pre、pre-wrap 或 pre-line。普通 <p></p> 或 <div> 即使写了 <code>tab-size: 4，也毫无效果，因为默认 white-space: normal 会直接把 \t 当空格甚至丢弃。
另一个高频陷阱是：你重写了 white-space 但没意识到它和 tab-size 的绑定关系。比如加了 white-space: normal 或 break-spaces，tab-size 就彻底失效。
Firefox/Chrome/Safari 的前缀与兼容写法
截至 2026 年中，tab-size 的跨浏览器支持仍未统一：
- Chrome / Edge / 新版 Opera：支持标准
tab-size: 4 - Firefox：必须用
-moz-tab-size: 4（注意大小写，MozTabSize是 JS 属性名，不是 CSS） - Safari：至今不支持
tab-size（包括-webkit-tab-size也无效），所有声明都会被忽略
所以真正能覆盖主流环境的写法是：
pre {
-moz-tab-size: 4;
tab-size: 4;
}
不用写 -o-tab-size（Opera 15+ 已淘汰），也不用加 -webkit-（Safari 不认）。顺序上把标准属性放最后，确保现代引擎优先使用它。
JavaScript 动态设置 tab-size 的坑
想用 JS 控制？别直接操作 style.tabSize，因为浏览器前缀差异会让逻辑分裂：
-
el.style.tabSize = "2"：Chrome/Safari/Edge 可用 -
el.style.MozTabSize = "2"：Firefox 必须这样写（首字母大写，驼峰） - 如果两者都设，后者可能被前者覆盖，尤其在 Firefox 中行为不稳定
更稳妥的做法是预定义 CSS 类：
.tab-2 { -moz-tab-size: 2; tab-size: 2; }
.tab-4 { -moz-tab-size: 4; tab-size: 4; }
然后 JS 只做 el.classList.replace("tab-4", "tab-2")，避免运行时判断 UA 或重复赋值。
后端没传 \t，前端再怎么调 tab-size 都白搭
tab-size 不生成制表符，只渲染已有 \t 字符的视觉宽度。如果后端返回的是空格缩进的字符串（例如 JSON.stringify(obj, null, 2)），那 tab-size 完全无效——它对空格无感。
要让 tab-size 发挥作用，前后端得约定：源码内容必须含原始 \t（比如从 Git 读取 .js/.py 文件、或编辑器导出带 tab 的文本）。否则就得换方案：用 white-space: pre-wrap + 正则把空格转 \t，但要注意缩进层级错位风险。
另外，tab-size 的值只能是非负整数（如 4），不能是小数、负数或长度单位（2em、16px）——所有主流浏览器遇到非法值会直接丢弃整条声明。
