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

时间 2019-11-08

标签 min height 最小高度实现兼容 ie6 ie7 栏目浏览器繁體版

原文原文链接

　　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提供了一个思路，因此产生了如下兼容IE六、IE七、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/1css

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

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