min-height最小高度的实现兼容IE6/IE7/FF

最新推荐文章于 2024-07-11 16:48:43 发布

weixin_34029949

最新推荐文章于 2024-07-11 16:48:43 发布

阅读量95

点赞数

文章标签： xhtml ui

原文链接：https://my.oschina.net/haojay/blog/79899

版权

为什么80%的码农都做不了架构师？>>>

　　CSS的兼容性问题一直令CSSer头疼，最小高度min-height是一个非常有用的属性，在页面布局中的很多地方可以用到。

　　当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。

　　min-height属性并非所有浏览器都兼容，主要问题还是出现在IE6，这个不支持标准的浏览器偏偏占据很大的用户群体，虽然IE7发布很久了，IE8正式版也快发布了，但IE6依然有着众多的用户。实在让CSSer非常无奈。

　　关于可以min-height属性参考这里： http://www.w3school.com.cn/css/pr_dim_min-height.asp

　　E6对于overflow的特殊实现，给我们实现min-height提供了一个思路，所以产生了以下兼容IE6、IE7、FF浏览器的min-height写法：

#mrjin {
    background:#ccc;
    min-height:100px; 
    height:auto !important; 
    height:100px; 
    overflow:visible;
}

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>min-height最小高度的实现 兼容IE6/IE7/FF</title>
<style type="text/css">
<!--
#mrjin {
	background:#ccc;
	min-height:100px; 
	height:auto !important; 
	height:100px; 
	overflow:visible;
}
-->
</style>
</head>

<body>
<div id="mrjin">
	www.av.com<br />
	Mr.Jack<br />
	CSS Web Design<br />
	CSS<br />
	致力于web标准在中国的应用及发展<br />
	Web标准化 Div+css教程
</div>
</body>
</html>

在线预览：

http://www.ostools.net/jsbin/rglcifjy/1

转载于:https://my.oschina.net/haojay/blog/79899