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

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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>

回复讨论(解决方案)

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

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

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

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

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

如何用Python编写求解最小公倍数的算法？Sep 19, 2023 am 11:25 AM

如何用Python编写求解最小公倍数的算法？最小公倍数是指两个数中能够整除这两个数的最小整数。在数学中，求解最小公倍数是一项基本的数学任务，而在计算机编程中，我们可以使用Python来编写一个求解最小公倍数的算法。下面将介绍基本的最小公倍数算法，并给出具体的代码示例。最小公倍数的数学定义是：如果a能被n整除且b能被n整除，则n是a和b的最小公倍数。要求解最小

快速计算矩阵逆的方法 - Numpy实现Jan 24, 2024 am 08:47 AM

Numpy是Python中著名的科学计算库，为处理大型多维数组和矩阵提供了丰富的功能和高效的计算方法。在数据科学和机器学习领域，矩阵的逆运算是一项常见的任务。在本文中，我将介绍使用Numpy库快速求解矩阵逆的方法，并提供具体的代码示例。首先，让我们通过安装Numpy库引入它到我们的Python环境中。可以使用以下命令在终端中安装Numpy：pipinsta

如何使用Python实现求解阶乘的算法？Sep 19, 2023 am 10:30 AM

如何使用Python实现求解阶乘的算法？阶乘是数学中的重要概念，指的是一个数乘上其自身减一，再乘上自身减一减一，以此类推，直到乘到1为止。阶乘通常用符号"!"来表示，例如5的阶乘表示为5!，计算公式为：5!=5×4×3×2×1=120。在Python中，我们可以使用循环来实现一个简单的阶乘算法。下面给出一个示例代码：deffacto

用C语言编程实现最大公约数求解Feb 21, 2024 pm 07:30 PM

标题：用C语言编程实现最大公约数求解最大公约数（GreatestCommonDivisor，简称GCD）是指能够同时整除两个或多个整数的最大正整数。求解最大公约数对于一些算法和问题解决非常有帮助。在本文中，将通过C语言编程来实现求解最大公约数的功能，并提供具体的代码示例。在C语言中，可以使用欧几里得算法（EuclideanAlgorithm）来求解最大

学习C语言如何求解最大公约数Feb 21, 2024 pm 11:18 PM

学习C语言如何求解最大公约数，需要具体代码示例最大公约数（GreatestCommonDivisor，简称GCD）是指两个或多个整数中能够整除它们的最大正整数。在计算机编程中经常会用到最大公约数，特别是在处理分数、化简分数以及求解最简整数比例等问题时。本篇文章将介绍如何使用C语言来求解最大公约数，并给出具体的代码示例。求解最大公约数的方法有很多种，例如欧

在C/C++中编写求解模方程的程序？Sep 12, 2023 pm 02:21 PM

在这里，我们将看到一个与模方程相关的有趣问题。假设我们有两个值A和B。我们必须找到变量X可以取的可能值的数量，使得(AmodX)=B成立。假设A为26，B为2。所以X的首选值将是{3,4,6,8,12,24}，因此计数为6。这就是答案。让我们看一下算法以更好地理解。算法possibleWayCount(a,b)−begin  ifa=b,thenthereareinfinitesolutions  ifa

求第n个斐波那契数的C/C++程序？Sep 12, 2023 pm 06:01 PM

斐波那契数列是一个数列，其中下一项是前两项之和。斐波那契数列的前两项是0后跟1。在这个问题中，我们会发现斐波那契数列中的第n个数字。为此，我们将计算所有数字并打印n项。Input:8Output:011235813说明0+1=11+1=21+2=32+3=5使用For循环将前两项求和作为下一项示例#include<iostream>usingnamespacestd;intmain(){  intt1=0,t2=1,n,i,nextTerm;&am

PHP中如何求解2的乘方？Mar 28, 2024 am 11:09 AM

标题：PHP中如何求解2的乘方？具体代码示例分享在PHP编程中，求解数的乘方是一个常见的需求，特别是在一些算法和数学计算中。本文将详细探讨如何在PHP中求解2的乘方，并提供具体的代码示例供大家参考。在PHP中，可以使用幂运算符**来计算乘方。对于2的乘方，即计算$2^n$，其中$n$是乘方的指数。下面我们将通过几种不同的方法来实现这个计算。方法一：使用**运

See all articles