您好,匿名用户
随意问技术百科期待您的加入

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

0 投票

其实是为了做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
}
用户头像 提问 2013年 11月22日 @ Sion 上等兵 (319 威望)
分享到:

你的回答

隐私保护: 您的邮箱仅用于发送系统通知。
请输入验证码:
    图片验证码看不清?
登录注册后不会被要求输入验证码。

提一个问题:

相关问题

0 投票
1 回复 35 阅读
用户头像 提问 2012年 12月1日 @ Soraka 上等兵 (319 威望)
0 投票
1 回复 36 阅读
用户头像 提问 2013年 11月15日 @ Capricorn 上等兵 (188 威望)
0 投票
1 回复 34 阅读
0 投票
1 回复 32 阅读
用户头像 提问 2013年 11月21日 @ Lancer 上等兵 (183 威望)
0 投票
1 回复 27 阅读
用户头像 提问 2013年 12月15日 @ 河蟹 列兵 (96 威望)

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...