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 に答える