? ? ? ? 前言：在網(wǎng)頁(yè)設(shè)計(jì)中，常常遇到需要設(shè)置最小高度的問題。例如，設(shè)計(jì)方案中需要給一個(gè)div設(shè)置一個(gè)背景圖，而該div并不限定具體寬高值，其內(nèi)部?jī)?nèi)容無法撐開背景圖完全顯示所需要的高度，此時(shí)便需要設(shè)置最小高度。即當(dāng)div內(nèi)的內(nèi)容無法撐開父級(jí)高度時(shí)，會(huì)有一個(gè)最小高度保證父級(jí)背景顯示完全，而當(dāng)內(nèi)容高度大于最小高度時(shí)，該div的高度就會(huì)完全由內(nèi)容撐開。這里邊要用到css的一個(gè)屬性，即min-height。

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

? ? ? ? html代碼：

<div class="box"><h1>測(cè)試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的圖片。代碼演示結(jié)果在Chrome下顯示如下：

? ? ?

? ? ? ? ?其在ie6（使用ietest進(jìn)行模擬）下顯示效果如下：

? ?

? ? ?在ie6設(shè)置最小高度，需要對(duì)div的css代碼做如下修改：

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

? ? ? 在ie6下，限定高度為775px，當(dāng)內(nèi)容高度大于775px時(shí)，便會(huì)由內(nèi)容撐開。設(shè)置height：auto!important；是為了在除ie以外的瀏覽器中，覆蓋height：775px這個(gè)樣式。！important所在css樣式會(huì)比其他css樣式優(yōu)先級(jí)最高。但也需要注意！important的合理使用，特別是在協(xié)作開發(fā)的時(shí)候，需謹(jǐn)慎。

? ? ?改進(jìn)代碼后，在ie6下顯示效果如下圖所示：

? ??

總結(jié)

以上是生活随笔為你收集整理的兼容浏览器的最小高度(min-height)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。