正在加载中

最后更新于 2018年05月12日

上一篇文章我们用渐变背景模拟了斑马纹,这次我们顺带简单了解下如何控制tab的宽度。

浏览器默认一个tab是8个字符,这种感人的宽度简直让人吐血,你想想你在编辑器里一个tab才多宽,而且我们有时候经常是三个tab起步啊,这要是在浏览器里显示,简直突破天际,为此css3特意出了一个新属性:tab-size。

目前tab-size在日常的浏览器都是支持了,but---除了微软的浏览器,微软的浏览器不知道拖了多少后腿,你想想ie....再到现在的edge,来人,做了他。

嗯哼~~~有点扯远了,我们继续。

tab-size目前用,建议直接用数字,虽然也能用像素单位这些,但是苹果又不行啊,所以我们还是用数字就行,1就是代表一个1个字符宽度,默认是8(谷歌默认是4),我们改成2,!

tab-size:2;

效果图:

-50

好了,就是这么简单,你需要多宽就设置多少。

然后再放一张各大浏览器兼容性的图片:
请输入图片描述

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao