【ie7】下关于【absolute 和float】导致高度塌陷的问题，求解

wangyinshu 2013-09-12 04:54:40

ie8以及以上版本中此段代码是我要达到的效果，但是ie7不知何故导致了left，right类的高度塌陷。求高手解答。怎样兼容ie7

代码如下：



<!DOCTYPE html>

<html>

<head>

	<title></title>

<style type="text/css">

.content{

	position: absolute;

	top: 20px;

	bottom: 20px;

	background-color: #eee;

	left: 0;

	right: 0;

}

.left{

	height: 100%;

	width: 40%;

	float: left;

	position: relative;

	background-color: #888;

}

.right{

	position: relative;

	height: 100%;

	width: 60%;

	float: left;

	background-color: #666;

}

.img{

	width: 100px;

	background-color: red;

	height: 200px;

	float: right;

	position: relative;

	top: 50%;

	margin-top: -100px;

}

.detail{

	width: 300px;

	height: 300px;

	float: left;

	position: relative;

	top: 50%;

	margin-top: -150px;

	background-color: green;

}

.clearfix{

	*zoom: 1;

}

.clearfix:after,

.content-style:after{

	clear: both;

	content: "20";

	visibility: hidden;

	height: 0;

	display: block;

}

</style>

</head>

<body>

	<div class="content clearfix">

		<div class="left clearfix">

			<div class="img"></div>

		</div>

		<div class="right clearfix">

			<div class="detail"></div>

		</div>

		

	</div>

</body>

</html>

...全文

299 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

枫醉秋 2013-09-12

打赏
举报

浏览器的问题，这没办法，找个代替方案吧

跟我学做菜吧 2013-09-12

打赏
举报

你这height:100%在ie7下貌似没用，要不用js吧

wangyinshu 2013-09-12

打赏
举报

忘记粘贴代码了代码在此：


<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
.content{
	position: absolute;
	top: 20px;
	bottom: 20px;
	background-color: #eee;
	left: 0;
	right: 0;
}
.left{
	height: 100%;
	width: 40%;
	float: left;
	position: relative;
	background-color: #888;
}
.right{
	position: relative;
	height: 100%;
	width: 60%;
	float: left;
	background-color: #666;
}
.img{
	width: 100px;
	background-color: red;
	height: 200px;
	float: right;
	position: relative;
	top: 50%;
	margin-top: -100px;
}
.detail{
	width: 300px;
	height: 300px;
	float: left;
	position: relative;
	top: 50%;
	margin-top: -150px;
	background-color: green;
}
.clearfix{
	*zoom: 1;
}
.clearfix:after,
.content-style:after{
	clear: both;
	content: "20";
	visibility: hidden;
	height: 0;
	display: block;
}
</style>
</head>
<body>
	<div class="content clearfix">
		<div class="left clearfix">
			<div class="img"></div>
		</div>
		<div class="right clearfix">
			<div class="detail"></div>
		</div>
		
	</div>
</body>
</html>

引用楼主 wangyinshu 的回复: