html - IE中列表之间的差距

Question

我创建了一个垂直导航，其中包含我创建的按钮。 IE 中的每个按钮之间有很大的差距，我不知道为什么，因为所有边距都是 0!非常困惑，因为它在 Chrome 和 FF 中运行良好。

#buttons {
    float: left;
    padding: 0;
    margin: 0px 10px 10px 20px;
}
#buttons ul {
    display: inline;
}
#buttons ul li  {
    list-style: none;
    text-decoration: none;
    margin: 1px 0;
    clear:both;
}
#buttons ul li #quote{
    width: 270px;
    height: 53px;
    list-style: none;
    background-image: url('buttons.png');
}

#buttons ul li a:hover #quote{
    width: 270px;
    height: 53px;
    background-image: url('buttons.png');
    background-position: 270px 0px;
}
#buttons ul li #sample{
    width: 270px;
    height: 53px;
    list-style: none;
    background-image: url('buttons.png');
    background-position: 0px 53px;
}

#buttons ul li a:hover #sample{
    width: 270px;
    height: 53px;
    background-image: url('buttons.png');
    background-position: 270px 53px;
}
#buttons ul li #plan{
    width: 270px;
    height: 53px;
    list-style: none;
    background-image: url('buttons.png');
    background-position: 0px 106px;
}

#buttons ul li a:hover #plan{
    width: 270px;
    height: 53px;
    background-image: url('buttons.png');
    background-position: 270px 106px;
}
#buttons ul li #callback{
    width: 270px;
    height: 53px;
    list-style: none;
    background-image: url('buttons.png');
    background-position: 0px 159px;
}

#buttons ul li a:hover #callback{
    width: 270px;
    height: 53px;
    background-image: url('buttons.png');
    background-position: 270px 159px;
}

        <div id="buttons">
            <ul>
                <li><a href="#" onClick="openForm()"><div id="quote"></div></a></li>
                <li><a href="#"><div id="sample"></div></a></li>
                <li><a href="#"><div id="plan"></div></a></li>
                <li><a href="#"><div id="callback"></div></a></li>
            </ul>
        </div>

Answer 1

一些旧版本的 IE 不喜欢 <li> 之间的空格标签。

如果您可以访问 HTML，那么您可以通过几种方式解决这个问题。

任一评论:

<li>element One</li><!--
--><li>element Two</li><!--
--><li>element Three</li>...

或单行列表:

<li>element One</li><li>element Two</li><li>element Three</li>...

或者您可以尝试添加 vertial-align: bottom;所有 <li>标签。