兼容瀏覽器的最小高度(min-height)

        前言：在網頁設計中，常常遇到需要設置最小高度的問題。例如，設計方案中需要給一個div設置一個背景圖，而該div並不限定具體寬高值，其內部內容無法撐開背景圖完全顯示所需要的高度，此時便需要設置最小高度。即當div內的內容無法撐開父級高度時，會有一個最小高度保證父級背景顯示完全，而當內容高度大於最小高度時，該div的高度就會完全由內容撐開。這裏邊要用到css的一個屬性，即min-height。

        但是一般好用的東西都存在兼容性問題，min-height存在一個兼容性問題-不兼容IE6。代碼演示如下：

        html代碼：

                <div class="box">
			<h1>測試min-height兼容性</h1>
		</div>

       css代碼：

                      body,
			h1{
				margin:0;
			}
			.box{
				min-height:775px;
				background:url(../min-hight.jpg) no-repeat 0 0;
			}
			h1{
				font:14px/7 "微軟雅黑";
				color:#000;
			}

     

         其中背景圖片是在百度上隨便下載的一張1024*775的圖片。代碼演示結果在Chrome下顯示如下：

     

         其在ie6（使用ietest進行模擬）下顯示效果如下：

   

     在ie6設置最小高度，需要對div的css代碼做如下修改：

                    .box{
				min-height:775px;
				height:775px;
				height:auto !important;
				background:url(../min-hight.jpg) no-repeat 0 0;
			}

      在ie6下，限定高度爲775px，當內容高度大於775px時，便會由內容撐開。設置height：auto!important；是爲了在除ie以外的瀏覽器中，覆蓋height：775px這個樣式。！important所在css樣式會比其他css樣式優先級最高。但也需要注意！important的合理使用，特別是在協作開發的時候，需謹慎。

     改進代碼後，在ie6下顯示效果如下圖所示：