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

Inhaltsverzeichnis

回复讨论(解决方案)

Heim

Web-Frontend

HTML-Tutorial

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

Jun 21, 2016 am 09:46 AM

本帖最后由 wangyinshu 于 2013-09-12 16:58:05 编辑

ie7 absolute 高度塌陷

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>

Nach dem Login kopieren

回复讨论(解决方案)

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

<!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>

Nach dem Login kopieren

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

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

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

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn