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>代码。

IE中列表之间的差距

1 个答案: