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-size
Value:	<integer> | <length>
Initial:	8
Applies to:	block containers
Inherited:	yes
Percentages:	N/A
Media:	visual
Computed 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>
ABCDEFGH
	TAB test
12345678
</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，暂时还没办法。