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