由text-indent引起的问题

先看下我们最终要完成的效果：

首页是公共的定义：

ul{
 display:block;
 clear:both;
 list-style:none;
 width:210px;/*蓝色背景正常宽度*/
 overflow:hidden;/*hack具体看[原]清除浮动最简单的方法*/
 padding:4px 0;
 background-color:#3366CC;
}

step-1

先把基本的表现做出来：

li{
 width:97px;
 background-color:#FFFF00;
 line-height:23px;
}

step-2

为了让li并排，为它加上float、加上间隔。注意，此时IE6下会出现“双倍间隔的bug”

li{
 float:left;
 width:82px;
 margin:0 0 4px 5px;
 background-color:#FFFF00;
 line-height:23px;
}

step-3

OK，兵来将挡，用display:inline对付bug。

li{
 display:inline;
 float:left;
 width:97px;
 margin:0 0 4px 5px;
 background-color:#FFFF00;
 line-height:23px;
}

step-4

如何给li中的文字跟边缘加间隔呢？有两个方案：

1. text-indent
2. padding-left

大家都知道padding会影响到盒模型，而传说中text-indent是不会影响到盒模型的。 OK，让我们试试text-indent。

li{
 display:inline;
 float:left;
 width:97px;
 margin:0 0 4px 5px;
 background-color:#FFFF00;
 text-indent:20px;
 line-height:23px;
}

看上去表现不错，不过再看看IE6……出现那奇怪的现象了，在偶数的列表中，蓝色背景右边和下面都多出了一块。

很明显跟text-indent是有关！嘿～嘿～，为什么会这样呢？目前原因不明，不过个人觉得跟“IE是猪”那个bug可能同出一辙。

觉得是不是因为列表的关系，一开始我也怀疑，因为li的属性比较特别，为此，我们再写一个不用li的：

很不幸，结果是一样的。

Ghost Zhang

Email:lovej1bz@gmail.com

QQ:22168741

ORG:WebReBuild.ORG www.CSSForest.ORG

Blog:http://forest.blogbus.com