Question

我有一个列表，每个列表元素都是内联的。我为li一个元素添加了边框，但是除了第一行之外的每一行都切出了边框和填充。它适用于除Internet Explorer 7之外的所有浏览器。您有任何解决方案吗？

alt text http://www.freeimagehosting.net/uploads/88ca5acd54.jpg

<div class="container">
<ul>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 12</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 5</li>

    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 4</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 3</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 2</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 2</li>

    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>

    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>
    </ul>
</div>

CSS：

    .container{
        padding: 5px 10px;
        width: 200px;
    }

    ul{
        list-style-type: none;
    }

    li{
        display: inline;
        line-height:30px;
    }

    li{
        color: #35a9e5;
        font-weight:bold;
        white-space:nowrap;
    }
        .temakor{
            color:#a2a2a2;
            background-color:#3B3B3B;
            border:2px solid #678194;
            padding:3px 10px;
        }

Answer 1

填充在内联元素上的作用与在块元素上的作用不同。

Answer 2

尝试为li

添加样式

zoom:1; *display:inline;

Answer 3

以下为我解决了同样的问题：

position:relative;

Internet Explorer内联边框错误

3 个答案: