话说现在都在抵制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
汪杰 阅读(293)
评论(0) 编辑 收藏 引用 所属分类:
div css dhtml