Internet Explorer inline border bug

Question

I have a list and each list element is inline. I add border to the li a elements, but every row except the first row, it cut out the border and padding. It works in every browser, except Internet explorer 7. Do you have any solution?

<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

Padding will not work the same on an inline element as it does on a block element.