0

我创建了一个垂直导航，它包含在我创建的按钮中。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>
4

1 回答 1

0

<li>一些旧版本的 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>...

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

于 2012-10-18T09:56:46.480 回答