IE6/7下面li高度无法被js添加的元素撑开

Question

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