文章介紹了min-height和min-width兼容多瀏覽器版本做法，有需要的同學(xué)可看看。min-height和min-width這兩個(gè)最小高度和最小寬度的容器屬性相信大家并不陌生。先說(shuō)說(shuō)min-height。這個(gè)看起來(lái)很容易?？聪旅嬖?yán)?br />

運(yùn)行圖如下：

先別高興的太早，不要忘了已經(jīng)讓你深?lèi)和唇^，但又不得不朝夕相對(duì)的ie6.0，它是這樣回應(yīng)你的：
 
沒(méi)有辦法，誰(shuí)讓國(guó)富民窮的國(guó)人口袋里沒(méi)有錢(qián)呢？或許不應(yīng)該這樣說(shuō)。應(yīng)該說(shuō)誰(shuí)讓我們無(wú)私的國(guó)人，把自己的口袋無(wú)償?shù)呢暙I(xiàn)給了國(guó)家了呢？我們升級(jí)不起ie瀏覽器?？啾频膰?guó)人?。?！扯遠(yuǎn)了........問(wèn)題總要解決的！窮人有窮人的活法。腦子突然冒出一個(gè)現(xiàn)象！

代碼： 


最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度</div> 當(dāng)給容器一個(gè)高度的時(shí)候，標(biāo)準(zhǔn)瀏覽器是這樣的處理的，如果沒(méi)有設(shè)置overflow的情況下，內(nèi)容會(huì)超出但容器的高度不會(huì)變！這時(shí)候，我們又回到了前面，如果要自適應(yīng)高度的話(huà)，當(dāng)然去掉height屬性。有時(shí)候我們需要一個(gè)最小的高度占據(jù)一定的空間。所以引出min-height屬性。但可悲的是ie6.0不支持！！可是同樣的代碼我們?cè)趇e6.0里測(cè)試結(jié)果是這樣的：

真是讓人意外！！在ie6里面，內(nèi)容超出高度height的時(shí)候，height竟然失效了！！這不正是min-height的所要達(dá)到的效果嗎？于是乎，我們不得不對(duì)ie6.0采用hack (_height:120px)技術(shù)。這里我說(shuō)“不得不”是因?yàn)槲覙O度討厭用hack。個(gè)中滋味自己體會(huì)，我的原則是，能不用hack盡量不用。代碼如下：


經(jīng)測(cè)試，預(yù)期達(dá)到。 路終于是走了一半了，顯然，我們不滿(mǎn)足于此，一顆不滿(mǎn)足的心才能收獲更多！在技術(shù)的道路上不防貪婪些?。∥覀兿胍猰in-width也達(dá)這樣的效果。先來(lái)測(cè)試一下：


可是結(jié)果讓我們很是意外，所有瀏覽器里統(tǒng)統(tǒng)失效：
怎么回事？考，全罷.工啦??！仔細(xì)琢磨，原來(lái)不是這么玩的。容器的高度默認(rèn)情況下是由內(nèi)容多少?zèng)Q定的，但寬度不是??！默認(rèn)情況下是繼承了父容器的寬度。當(dāng)然，前提是display是block。哦，原來(lái)是這么回事，我們得讓容器的默認(rèn)寬度是內(nèi)容多少來(lái)決定。由此我想到了幾種情況：1 display:inline      但有個(gè)問(wèn)題是這樣的話(huà)width就失效了,經(jīng)測(cè)試min-width同樣也失效，這種情況被pass掉了，海選?。。。? 于是乎我們想到display:inline-block屬性；嗯這個(gè)應(yīng)該沒(méi)有問(wèn)題吧??？動(dòng)手吧代碼如下：


經(jīng)測(cè)試，firefox、chrome、ie8.0均有效。

可萬(wàn)惡的ie6還是不行啊?。《页鰜?lái)個(gè)搗亂的，ie7也不行。別，仔細(xì)看看，原來(lái)ie6和ie7就沒(méi)實(shí)現(xiàn)display:inline-block;
修改代碼：


先試試ie7，ok大功告成！再試ie6，依然“萬(wàn)惡”?。e急呀，至少我們明白了min-width的用法，當(dāng)寬度由內(nèi)容決定的時(shí)候才起作用。多放點(diǎn)內(nèi)容試試，是不是如我們所想內(nèi)容超出的話(huà)，容器變大？
嗯，果然是。但是有個(gè)小問(wèn)題，就是當(dāng)內(nèi)容超過(guò)瀏覽器的寬度時(shí)，依然會(huì)換行。先不管它！先解決ie6.0的問(wèn)題。仔細(xì)琢磨一下，現(xiàn)在又回到當(dāng)初的思路了，只有i6有問(wèn)題。當(dāng)初是怎么解決的？哦，ie6.0 的height本身就具備min-height 的特性。那width是不是也如此呢？我們加個(gè)_width:220px試試 


 
結(jié)果很?chē)?yán)重，我們很失望。我們唯一思路也被隔斷了！種么辦？種么辦？....."換行！??？？"那我就讓你不換行?。。?br />
 

竟然可以了！加點(diǎn)內(nèi)容?。?！
竟然連上面的，超出瀏覽器寬度問(wèn)題也解決了！試試其它瀏覽器。ie7、ie8、firefox、chrome全部通過(guò)。以外收獲！3 position:absolute  嗯這個(gè)看起來(lái)也行。 


 
加些內(nèi)容：
 
依然可以，預(yù)期達(dá)到。 4 float:left 這種情況最常用。應(yīng)該也行！上代碼： 


 
同樣加些內(nèi)容：
預(yù)期達(dá)到！