码迷,mamicode.com
首页 > 其他好文 > 详细

IE6不支持min-height如何解决高度自适应问题

时间:2015-12-07 13:57:56      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

IE6不支持min-height如何解决高度自适应问题:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
IE6问题多多,给大家带来了诸多烦恼,这里介绍一下因为IE6浏览器不支持min-height属性,从而导致了高度无法自适应的问题。在其他标准浏览器中,我们可以使用min-height属性给容器规定一个最小高度,如果内容超过这个最小高度,容器会自动被撑开以达到高度自适应效果,但是IE6浏览器并不支持这个属性,不过IE6本身就有高度自适应的特点,或许大家会认为只要同时使用height和min-height属性就可以达到高度自适应效果,例如: 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.mytest 
{
  width:100px;
  height:100px;
  min-height:100px;
  border:1px solid green;
}
</style>
</head>
<body>
<div class="mytest">欢迎大家来到蚂蚁部落,希望能够给予有益的建议和意见,在这里再次感谢了!</div>
</body>
</html>

从运行结果来看IE6达到了高度自适应效果,但是其他标准浏览器中,容器的高度是100px,产生溢出,因为min-height属性被height属性所覆盖。那么上面的CSS代码就相当于以下代码:

width:100px;
height:100px;
border:1px solid green;

下面我们在修改一下CSS代码如下:

width:100px;
height:auto!important;
height:100px;
border:1px solid green;

代码中我们添加了height:auto!important,这样我们就达到了高度自适应效果,但是由于height:auto!important优先级高于height:100px,所以导致没有了最小高度效果。再次修改代码:

width:100px;
height:auto!important;
height:100px;
min-height:100px;
border:1px solid green;

使用以上CSS代码就能够兼容所有浏览器的高度自适应问题了。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=3387

更多内容可以参阅:http://www.softwhy.com/divcss/

IE6不支持min-height如何解决高度自适应问题

标签:

原文地址:http://www.cnblogs.com/come-on/p/5025732.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!