asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0

CSS: 修复IE6下LI元素的几点BUG


话说现在都在抵制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得恨也更深一些了,马勒隔壁的耽搁我如此多的时间。

posted on 2010-05-10 18:28 汪杰 阅读(302) 评论(0)  编辑 收藏 引用 所属分类: div css dhtml
只有注册用户登录后才能发表评论。

<2024年11月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 467490
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜