tab-size仅对和等保留空白符的元素生效,需配合white-space: pre(或pre-wrap/pre-line)使用;普通或上无效。

tab-size 只对 <pre class="brush:php;toolbar:false;"></pre> 和 <textarea></textarea> 这类保留空白符的元素生效,且必须配合 white-space: pre(或 pre-wrap、pre-line)才起作用;直接写在普通 <p></p> 或 <div> 上无效。
<h3>为什么 <code>tab-size 在 <pre class="brush:php;toolbar:false;"></pre> 里不生效?
常见原因是浏览器兼容性或样式未正确应用:
-
<pre class="brush:php;toolbar:false;"></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 字符,宽度由目标编辑器决定。











