tab-size仅对<pre>和<textarea>等保留空白符的元素生效，需配合white-space: pre（或pre-wrap/pre-line）使用；普通<p>或<div>上无效。
tab-size 只对 <pre> 和 <textarea> 这类保留空白符的元素生效，且必须配合 white-space: pre（或 pre-wrap、pre-line）才起作用；直接写在普通 <p> 或 <div> 上无效。
为什么 tab-size 在 <pre> 里不生效？
常见原因是浏览器兼容性或样式未正确应用：
-
<pre>元素默认已有white-space: pre，这点通常不用额外加；但如果你重写了该属性（比如设成normal），tab-size就会彻底失效 - Chrome 支持标准
tab-size: 4，Firefox 必须用-moz-tab-size: 4，Opera 需要-o-tab-size: 4；只写一个会导致部分浏览器回退到默认 8 -
length值（如tab-size: 2em或tab-size: 16px）目前所有主流浏览器都不支持，传入会直接忽略
怎么写才真正跨浏览器生效？
推荐同时声明标准属性和前缀，顺序建议标准属性放最后（覆盖前缀）：
pre {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
这样 Firefox、Opera、Chrome、Edge（新版）都能识别。Safari 自 Chrome 21 起也支持标准语法，无需额外前缀。
立即学习“前端免费学习笔记（深入）”；
注意：tab-size 的值必须是非负整数，不能是小数（如 3.5）或负数（如 -2），否则整个声明会被浏览器丢弃。
JavaScript 动态修改 tab-size 怎么做？
用 element.style.tabSize 设置即可，但要注意前缀兼容性：
- Chrome/Safari/Edge：支持
el.style.tabSize = "2" - Firefox：必须用
el.style.MozTabSize = "2"（注意大小写） - 不要混用，比如先设
tabSize再设MozTabSize，后者可能被前者覆盖
更稳妥的做法是统一用 CSS 类控制，JS 只切换 class 名，避免前缀差异带来的维护成本。
容易被忽略的一点：tab-size 不影响实际文本内容，它只是视觉渲染层的缩进控制；复制粘贴到编辑器里，制表符仍是原始 \t 字符，宽度由目标编辑器决定。
