其实是为了做ajax评论才发现的这个问题，类似于qq空间那种顶级回复和二级回复评论的效果，结构是这样的：

<li><div>内容一</div></li>
<li><div>内容二</div></li>
<li><div>内容三</div></li>

然后在div里面的一个a上绑定click事件，点击之后，就在div的后面，也就是li里面插入一个回复用的textarea之类的html。别的浏览器都是好的，但是IE6/7下，li的高度好像撑不开，插入进去的html与其他的li重叠了。
同时，为a的点击做了显示和隐藏回复的切换效果，刚开始li高度撑不开，后来多点几次，把其他的li里的回复链接都点一下，就又能撑开了，不知道为什么，求解。

评论代码如下：

<ul class="msg-list">
    <li>
        <a href="#" class="head"><img alt="" src="images/head50.jpg"></a>
        <p class="reply-area"><span class="right"><a href="#">共有(<em class="darkorange">8</em>)条评论</a><a href="#" class="reply">[回复]</a></span>满意度：<span class="icon-star"><i style="width:80%"></i></span><span class="grey">2012-11-01 13:30:20</span></p>
        <div class="msg-txt"><a href="#" class="user-name">玉儿 ：</a>节约时间啊，真节约时间啊。。</div>
        <div class="comments_list">
            <ul>
                <li>
                    <a href="#" class="head"><img alt="" src="images/head50.jpg"></a>
                    <p><a href="#" class="user-name">Alen ：</a>嗯。时间就是金钱！~</p>
                    <p class="grey">2012-11-03 09：00</p>
                </li>
                <li>
                    <a href="#" class="head"><img alt="" src="images/head50.jpg"></a>
                    <p><a href="#" class="user-name">Alen ：</a>嗯。时间就是金钱！~</p>
                    <p class="grey">2012-11-03 09：00</p>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <a href="#" class="head"><img alt="" src="images/head50.jpg"></a>
        <p class="reply-area"><span class="right"><a href="#">共有(<em class="darkorange">8</em>)条评论</a><a href="#" class="reply">[回复]</a></span>满意度：<span class="icon-star"><i style="width:80%"></i></span><span class="grey">2012-11-01 13:30:20</span></p>
        <div class="msg-txt"><a href="#" class="user-name">玉儿 ：</a>节约时间啊，真节约时间啊。。</div>
        <!--
        <div id="ajaxReply" class="clearfix">
            <div class="rwrap">
                <textarea></textarea>
            </div>
            <input class="right replaybtn" type="button" value="回复" />
            <span class="face">表情</span>
        </div>
        -->
    </li>
    <li>
        <a href="#" class="head"><img alt="" src="images/head50.jpg"></a>
        <p class="reply-area"><span class="right"><a href="#">共有(<em class="darkorange">8</em>)条评论</a><a href="#" class="reply">[回复]</a></span>满意度：<span class="icon-star"><i style="width:80%"></i></span><span class="grey">2012-11-01 13:30:20</span></p>
        <div class="msg-txt"><a href="#" class="user-name">玉儿 ：</a>节约时间啊，真节约时间啊。。</div>
    </li>
</ul>

js 里插入的 html 代码如下：

<div id="ajaxSubReply" class="clearfix">
    <div class="rwrap">
        <textarea></textarea>
    </div>
    <input class="right replybtn" type="button" value="回复" />
    <span class="face">表情</span>
</div>

css 代码

.clear {
    clear:both;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0;
    border:none;
    font-size:0
}
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0
}
.clearfix{
    zoom:1
}
.left{
    float:left;
    display:inline
}
.right{
    float:right;
    display:inline
}
.ui-comment{
    padding:10px;
    background:#fafafa
}
.ui-comment .comment, .ui-comment li{
    position:relative;
    zoom:1;
}
.ui-comment .head{
    position:absolute;
    padding:1px;
    border:1px solid #ddd;
    background:#fff
}
.ui-comment .msg-list a, .ui-comment .msg-list .user-name{
    color:#177ebe;
}
.ui-comment .head img{
    width:50px;
    height:50px;
}
.ui-comment .comment{
    padding:0 0 15px 80px;
    border-bottom:1px dashed #ddd;
}
.ui-comment .comment .head{
    top:25px;
    left:10px;
}
.ui-comment .ui-txt{
    width:585px;
    height:55px;
    margin:5px 0 10px;
    padding:5px;
    border:1px solid #ddd;
    outline:none;
    overflow:hidden;
}
.ui-comment .handle{
    height:28px;
    line-height:28px;
}
.ui-comment .handle a{
    margin:0 5px;   
    color:#177ebe
}
.ui-comment .handle .sub-msg{
    float:right;
    width:64px;
    height:28px;
    line-height:28px;
    margin-right:12px;
    color:#fff;
    text-align:center;
    background:url(../images/button-sp.png) no-repeat -84px -85px;
}
.ui-comment .ui-comments{
    padding:10px 10px 20px;
}
.ui-comment li{
    padding:5px 0 0 70px;
}
.ui-comment .msg-txt{
    padding:10px;
    margin:5px 0 10px;
    background:#eee;
}
.ui-comment .reply-area a{
    margin-left:10px;
}
.ui-comment li li{
    margin-bottom:5px;
    padding-top:10px;
}
.ui-comment .msg-list .head{
    top:0;
    left:0
}