Internet Explorer 内嵌边框错误答案

【问题标题】：Internet Explorer inline border bugInternet Explorer 内嵌边框错误
【发布时间】：2017-07-25 14:41:28
【问题描述】：

我有一个列表，每个列表元素都是内联的。我为 li a 元素添加了边框，但是除了第一行之外的每一行，它都剪掉了边框和填充。它适用于除 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;
        }

【问题讨论】：

标签： css internet-explorer-7

【解决方案1】：

内联元素和块元素的填充效果不同。

【讨论】：

做你想做的事情，将 li 显示为块并将它们向左浮动。

【解决方案2】：

尝试为 li 添加样式

zoom:1; *display:inline;

【讨论】：

【解决方案3】：

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

position:relative;

【讨论】：