炒冷饭系列之IE Bug(4) —— 列表项之间的空白间隙

这个Bug依然出现在可恶的IE6上,当我们做一个垂直列表的时候,希望列表项之间没有空隙,但是在IE6上却会莫名其妙出现空隙。

html代码:

<ul>
	<li><a href="">首页</a></li>
	<li><a href="">产品</a></li>
	<li><a href="">服务</a></li>
	<li><a href="">关于</a></li>
</ul>


css代码:

ul {
	list-style:none;
	margin:0;
	padding:0;
	width:80px;
}
a {
	display:block;
	text-decoration:none;
	color:#fff;
	background-color:#555;
	text-align:center;
	padding:10px;
}

在现代浏览器中显示如下:

现代浏览器下的正常显示效果

但在IE6中却出现了空白间隙:

IE6下的空白效果

其实IE6中出现的很多Bug都是由于haslayout的问题,至于haslayout是什么,可自行百度了解,其实就是IE的一个内部属性,很多情况下只要触发了haslayout就会解决相关问题。触发haslayout的方法有很多种,比如添加宽高(值不能为auto),添加float(left或者right),添加zoom(值不可为normal)等,这些内容都可以在haslayout的相关文章中查阅到。针对这个空白间隙的问题,我们就是要通过触发haslayout属性来解决Bug。

在这里我们可以为其添加

height:1%;
width:60px;
zoom:1;
float:left;

另外还可以给li添加display:inline;来解决问题。

以上5种的任意一种都可以解决这个Bug,但是一般情况下强烈推荐用height:1%来解决。zoom无法通过W3C验证,而float与width会改变原有的显示宽度。