ie6下侧导航中的bug

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-21 11:40:12　-　阅:　-　评:0　-　积分:0

侧导航在一般的网站中很少用到，这几天在做案例，偶然间发现侧导航在ie6下存在一个bug。其实这个问题在之前也遇到过，当时并没有仔细分析，当然，当时也解决了。下面就先让bug重现，然后再来具体的分析下解决之道吧。

为了便于读者察觉此bug，笔者献上截图。

看着图中的文字说明，是不是有一种似曾相识的感觉？还是熟悉的3px，还是原来的li。说起这个3px，笔者的网站中已经有多篇文章中提及，不论是图片还是文本，还是浮动，这一切都与3px有关。看来3px的人缘挺不错嘛，呵呵！今天的这个3px是怎么回事呢？还是要看源码才行的。源码如下：

在线演示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie6下侧导航中的bug</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
*{margin:0; padding:0}
body{font-size:12px;}
a,a:hover{text-decoration:none;color:#fff;}
ul{list-style:none;margin:0 auto;width:125px;background:#333; margin-bottom:300px}
ul li{height:30px;line-height:30px;border-bottom:1px solid #999;}
ul li *{display:block;text-align:center;background:#ccc;}
</style>
</head>
<body>
<ul>
　<li><div>这个是div</div></li>
　<li><a href="http://www.yilingsj.com/flash/">flash动画</a></li>
　<li><a href="http://www.yilingsj.com/div/">div + css</a></li>
　<li><a href="http://www.yilingsj.com/">这个是a</a></li>
　<li><a href="#">html5实例3</a></li>
　<li><span>这个是span</span></li>
　<li><a href="http://www.yilingsj.com">设计欣赏</a></li>
　<li><p>这个是p</p></li>
</ul>
</body>
</html>

从源码中可以看到li里面的所有对象都设置成了块对象。你想到了什么？没错！这个3px的起因就是因为块对象。那么这个假设成立与否呢？笔者在li里面添加了div，p,span，a来进行测试，测试结果如第一张图。我们发现，原生的块对象所在的li是不会产生那个3px的间隙的，而经过转化后的块对象却产生了3px的bug。此时，笔者想起了本站在div+css区块发表的前3篇文章，都是提及块对象与内联对象，这里内联对象在转化后出现了bug的原因在那里可以找到答案。那么，既然问题产生了，如何来解决呢？手册中给了解决方法。

li *{zoom:1}

读到此处，读者可能以为本文就要接近尾声了。事实上也正是如此，笔者也提供一种解决的方法供读者参考。

li{border-bottom:1px solid #999}
li *{height:30px;line-height:30px}

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-10-21/98.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！