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

首页

web前端

html教程

【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吧

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系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

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

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

如何使用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 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