其实是为了做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
}