Html IE中列表之间的差距

我已经创建了一个垂直导航，它保存在我创建的按钮中。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>

#按钮{
浮动：左；
填充：0；
保证金：0px 10px 10px 20px；
}
#按钮ul{
显示：内联；
}
#钮扣，钮扣，钮扣，钮扣，钮扣{
列表样式：无；
文字装饰：无；
保证金：1px0；
明确：两者皆有；
}
#按钮ul li#报价{
宽度：270px；
高度：53px；
列表样式：无；
背景图片：url（'buttons.png'）；
}
#按钮ul li a：悬停#引用{
宽度：270px；
高度：53px；
背景图片：url（'buttons.png'）；
背景位置：270px 0px；
}
#按钮ul li#样品{
宽度：270px；
高度：53px；
列表样式：无；
背景图片：url（'buttons.png'）；
背景位置：0px 53px；
}
#按钮ul li a：悬停#示例{
宽度：270px；
高度：53px；
背景图片：url（'buttons.png'）；
背景位置：270px 53px；
}
#按钮ul li#计划{
宽度：270px；
高度：53px；
列表样式：无；
背景图片：url（'buttons.png'）；
背景位置：0px 106px；
}
#按钮：悬停#计划{
宽度：270px；
高度：53px；
背景图片：url（'buttons.png'）；
背景位置：270px 106px；
}
#按钮ul li#回调{
宽度：270px；
高度：53px；
列表样式：无；
背景图片：url（'buttons.png'）；
背景位置：0px 159px；
}
#按钮：悬停#回调{
宽度：270px；
高度：53px；
背景图片：url（'buttons.png'）；
背景位置：270px 159px；
}






一些旧版本的IE不喜欢标签之间的空白

如果您可以访问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>...

元素一
元素二
元素三
。。。

或者您可以尝试添加
垂直对齐：底部到所有
标记。
您考虑过重置样式表吗？还有什么版本的IE？只是尝试了一下，虽然有点帮助，但仍然有很大的差距。和IE 9，虽然我希望它工作到IE 7如果可能的话！如果删除元素之间的空白不起作用，请尝试将线条高度设置为0。线条高度解决了此问题！非常感谢，迪基，我恐怕这没用！这很奇怪，因为它从未发生在我和我制作列表的经验上，所以我很困惑为什么它会这样做..什么版本的IE？你能设置一个JSFIDLE吗？