话说现在都在抵制IE6，对于做前端的人来说这东西也着实可恶，但悲哀的是它楞是深得民心。刚在GA里面查了下统计，在IE的各版本中仍占4成多，所以为了照顾这部分人，还不得不深入虎穴，忍着痛恨研究丫王八羔子的各种HACK。

关于LI在IE6里面的一些诡异的表现一直令我很纠结，遂今天专门抽时间仔细研究了一番，总算摸到些头脑。各位看官请看下图：

上图是我想要的最终显示结果。其结构如下：

1
2
3
4
5
6
7
8
9
10
11
12

<ul>
	<li class="li1st">
		<p>第一个LI元素</p>
		<div class="smallbox">Smallbox</div>
		<div class="box">
			<p>第一个LI元素中嵌套的BOX</p>
			<div class="smallbox">Smallbox</div>
		</div>
	</li>
	<li class="li2nd"><p>第二个LI元素</p></li>
	<li class="li3rd"><p>第三个LI元素</p></li>
</ul>

相关CSS如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

body{
	font-size: 12px;
}
 
p{
	margin: 0;
	padding: 0;
}
 
ul{
	width: 536px;
}
 
li{
	position: relative;
	margin-bottom: 5px;
	padding: 15px;
	list-style: none;
	color: #000;
}
 
li.li1st,li.li3rd{
	background: #ff8906;
}
 
div.box{
	position: relative;
	padding: 15px;
	background: #ffd19d;
}
 
li.li2nd{
	background: #d3d3d3; 
}
 
div.smallbox{
	position: absolute;
	padding: 2px 8px;
	top: 0;
	right: 0;
	color: #fff;
	background: #000;
}

至此，在除IE6之外的主流浏览器里面都表现正常，但是在IE6下元素“div.smallbox”的绝对定位却出现了下图这样的问题，用IE6点击这里预览：

上图即IE6的解释：元素“div.smallbox”的绝对定位是相对父标签的父标签即<li>的“position”而非其父标签“div.box”的“position”。初查原因，是因为“div.box”元素没有设置宽或高（只要设置其一，此问题便可得以解决）导致在IE6下无法做出正确解释，但是问题在于“div.box”元素的宽或高都是未知随着内容多少而定的，我曾试着设置其宽为“width:100%;”，结果宽度超出了总宽度，所以不适用。查了些资料，找到一个有效的方法，即触发<li>及“div.box”元素的haslayout，为它们添加一个CSS值“zoom:1;”，代码片段如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

li{
	position: relative;
	margin-bottom: 5px;
	padding: 15px;
	list-style: none;
	color: #000;
	_zoom: 1; /*IE6 Hack*/
}
 
div.box{
	position: relative;
	padding: 15px;
	background: #ffd19d;
	_zoom: 1; /*IE6 Hack*/
}

终于这个问题被解决了。但是万恶的IE6岂肯就此罢休，此问题解决新问题又来了。如下图所示：

在第一个LI元素和第二个LI元素之间，多出来了3px的空隙！这是咋回事儿？这时候我已经开始咬牙切齿了！继续查资料，原来<li>包含一个块级子元素时（本例中为<p>标签），IE6(IE7也有可能)会错误地给每条<li>列表元素之间添加一个3px空隙。接下来我根据找到几种方法逐一测试，结果如下：

[1.] 为<li>元素加一个CSS值“vertical-align:bottom;”，测试结果是有效，但是顾此失彼，<li>元素的空隙消失了，其包含的“div.box”底下却出现了3px的空隙！这时候我已经快崩溃了。尝试给“div.box”也添加“vertical-align:bottom;”，无效。

[2.] 接下来又找到一个有效的方法即给<li>元素添加一个CSS值“font-size:0;”，然后再设置各个含有文字的元素的CSS值为“font-size:12px;（你所想要的字号）”，问题终于解决了。但这却不能算是一个好办法，要是太多包含文字的元素岂不是增加了许多步骤。

[3.] 这个方法比较简单，就是给包含在<li>元素里的子元素<p>应用CSS值“display:inline;”，这种方法有它的弊端，即如果里面有浮动内容的话，可能会导致排版混乱。

[4.] 这个方法应该算是比较Perfect，为<li>添加浮动并设置其宽度为“width:100%;”即可，代码片段如下：

1
2
3
4
5
6
7
8
9
10

li{
	position: relative;
	margin-bottom: 5px;
	padding: 15px;
	list-style: none;
	color: #000;
	_float: left; /*IE6 Hack*/
	_width: 100%; /*IE6 Hack*/
	_zoom: 1; /*IE6 Hack*/
}

终于！攻破连锁机关，问题终归解决了，最终效果可用IE6点击这里预览。从此对IE6得恨也更深一些了，马勒隔壁的耽搁我如此多的时间。