CSS自定义制表符(TAB)宽度

制表符常用来表示代码缩进，制表符的宽度的设置，对于任何一款代码编辑器来说都是很必须的功能。

在浏览器中展示代码的时候，通常我们只能将TAB替换为4个空格来显示，因为默认的TAB太宽了。

W3C的CSS3草案中已有关于TAB宽度的设定，在这里。

高兴的是，Firefox4和Opera10已经支持了，其它浏览器当前最新版仍然不支持。

（Firefox现在发布到版本9了，可见其对W3C标准支持度的领先，别看Chrome版本好变的老快，其实对标准的支持很残。）

要用到的CSS属性叫做 tab-size，可以赋值为一个整数，表示TAB宽度为多少个字符，默认是8。

W3C草案定义是这样的：

3.2. Tab Character Size: the ‘tab-size’ property

Name:tab-sizeValue:<integer> | <length>Initial:8Applies to:block containersInherited:yesPercentages:N/AMedia:visualComputed value:specified value

This property determines the measure of the tab character (U+0009) when rendered. Integers represent the measure in space characters (U+0020). Negative integers are not allowed.

示例：

<style type="text/css">pre {tab-size:4;-moz-tab-size:4;-o-tab-size:4;}</style><pre>ABCDEFGHTAB test12345678</pre>

对于不支持tab-size的浏览器，只能用font-size来影响tab宽度，麻烦一点了：

<style type="text/css">pre.t42 { font-size:9pt; }pre.t42 * { font-size:22pt; }</style><pre class="t42"><span>ABCDEFGH **</span><span>TAB test</span><span>12345678</span></pre>

原理就是在pre上的font-size决定TAB宽度，pre里面的文字用额外的font-size样式来确定字体大小。

对于Textarea，如果浏览器不支持tab-size，暂时还没办法。