html - CSS 边框不适合元素

Question

我在 this link 有一个页面我试图让评论周围的边框不高于图像的底部，所以我有一个评论的 html:

<li class="comment-item">
    <a name="comment-94"></a>
    <div class="comment-buttons">
        <a href="javascript:report(94);" class="report">Report</a>
        <a href="javascript:add_vote(94);" class="vote" id="vote-94">+1</a>
        <a href="?id=49&amp;replytocom=94#respond" class="reply">Reply</a>
    </div>
    <img src="/images/avatars/default.png" height="85" width="100">
    <p class="user">nat45928</p>
    <p class="date">August 3, 2011, 5:04 am</p>
    <p class="comment-body">test</p>
</li> 

我有这个用于与评论项相关的 css:

.comments .comment-item {
    list-style: none;
    border:2px black solid;
    border-radius:15px;
    margin: 5px 0 0 0;
    padding: 10px;
    clear:both;
    width:auto;
    height:auto;
}

.comments .comment-item * {
    margin: 0;
    padding: 0;
}

.comments .comment-item .user {
    font-family: "True Food Looks";
    letter-spacing:-2px;
    display:inline;
}

.comments .comment-item .date {
    margin-left:10px;
    display:inline;
}

.comments .comment-item img {
    float:left;
    margin-right:5px;
    border: solid black 1px;
    border-radius: 15px;
}

.comments .comment-item .comment-buttons {
    float:right;
    display:block;
    width: 80px;
    height: 70px;
}

.comments .comment-item .comment-buttons a {
    display:block;
    text-align: center;
    text-decoration: none;
    color: #000000;
}

.comments .comment-item .comment-buttons .report {
    height: 20px;
    margin-bottom: 5px;
    background-color:#C6B784;
    border-top-left-radius: 25px 20px;
    border-top-right-radius: 25px 20px;
}

.comments .comment-item .comment-buttons .vote {
    height: 20px;
    background-color:#70675C;
    border-radius: 10px;
}

.comments .comment-item .comment-buttons .reply {
    height: 20px;
    margin-top: 5px;
    background-color:#C6B784;
    border-bottom-left-radius: 25px 15px;
    border-bottom-right-radius: 25px 15px;
}

为什么会发生这种情况，我该如何解决？

Answer 1

.comment-item:before, .comment-item:after { content: ""; display: table; }
.comment-item:after { clear: both; }
.comment-item { zoom: 1; }

Here is the example