话说现在都在抵制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