一、什么是”台阶”Bug？

假设我们要创建一个水平的导航栏，如下图所示：

那么我们需要写出一个无序列表。代码如下：

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

然后用CSS对这个无序列表进行样式化，为了让导航栏水平延伸，我们使用Float属性来样式化<a>元素。CSS代码如下：

ul#menu li a{
font-family:Verdana;
display: block;
width: 130px;
text-align: center;
font-weight: bold;
float: left;
color: white;
font-size: 18px;
text-decoration: none;
background: #3b5998;
}

从理论上来说，这样就完成了上图的水平导航的设计，但是当我们在IE中查看结果时，会发现结果并非如我们所期望。实际的效果会如下图：

这样的结果看上去就像是一节节的台阶一样，这就是我所说的”台阶”Bug。

二、为什么会出现这样的台阶？

原因是在上面的水平导航栏中，列表元素包含着锚点元素，虽然列表元素也是块级元素，但是它却并没有浮动。而块级元素后面会很自然的出现回行，就像是有一个看不见的<br />标签。无论行距是多少，前面一个列表元素都会将下一个列表元素推到下面去，这就是为什么会出现”台阶”的原因。

三、如何修正这个Bug？

只需要给Li标签添加display:inline;属性，让li元素成为行内元素就可以解决出现回行的问题了。就可以了。代码如下：

ul#menu li {
display: inline; /* 防止"台阶"的出现*/
}