css中關於min-height與min-width相容瀏覽器的執行個體詳解

min-height和min-width這兩個最小高度和最小寬度的容器屬性相信大家並不陌生。

先說說min-height。這個看起來很容易。

看下面試例：

<p style="border:5px solid #f00;min-height:200px;width:300px;padding:12px;">    最小高度</p>

運行圖如下：

先別高興的太早，不要忘了已經讓你深惡痛絕，但又不得不朝夕相對的ie6.0，它是這樣回應你的：

沒有辦法，誰讓國富民窮的國人口袋裡沒有錢呢？或許不應該這樣說。應該說誰讓我們無私的國人，把自己的口袋無償的貢獻給了國家了呢？

我們升級不起ie瀏覽器。苦逼的國人！！！

扯遠了........

問題總要解決的！窮人有窮人的活法。

腦子突然冒出一個現象！

代碼：

<p style="border:5px solid #f00;height:120px;width:300px;padding:12px;">    最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度</p>

當給容器一個高度的時候，標準瀏覽器是這樣的處理的，如果沒有設定overflow的情況下，內容會超出但容器的高度不會變！這時候，我們又回到了前面，如果要自適應高度的話，當然去掉height屬性。有時候我們需要一個最小的高度佔據一定的空間。所以引出min-height屬性。但可悲的是ie6.0不支援！！

可是同樣的代碼我們在ie6.0裡測試結果是這樣的：

真是讓人意外！！在ie6裡面，內容超出高度height的時候，height竟然失效了！！這不正是min-height的所要達到的效果嗎？

於是乎，我們不得不對ie6.0採用hack (_height:120px)技術。這裡我說“不得不”是因為我極度討厭用hack。箇中滋味自己體會，我的原則是，能不用hack盡量不用。

代碼如下：

<p style="border:5px solid #f00;min-height:120px;_height:120px;width:300px;padding:12px;">    最小高度</p>

經測試，預期達到。

路終於是走了一半了，顯然，我們不滿足於此，一顆不滿足的心才能收穫更多！在技術的道路上不防貪婪些！！

我們想要min-width也達這樣的效果。

先來測試一下：

<p style="border:5px solid #f00;min-width:120px;;padding:12px;">    最小寬度</p>

可是結果讓我們很是意外，所有瀏覽器裡統統失效：

怎麼回事？考，全罷工啦！！仔細琢磨，原來不是這麼玩的。容器的高度預設情況下是由內容多少決定的，但寬度不是啊！預設情況下是繼承了父容器的寬度。當然，前提是display是block。

哦，原來是這麼回事，我們得讓容器的預設寬度是內容多少來決定。

由此我想到了幾種情況：

1 display:inline 但有個問題是這樣的話width就失效了,經測試min-width同樣也失效，這種情況被pass掉了，海選啊！！；

2 於是乎我們想到display:inline-block屬性；嗯這個應該沒有問題吧！？動手吧

代碼如下：

<p style="border:5px solid #f00;display:inline-block;min-width:220px;;padding:12px;">    最小寬度</p>

經測試，firefox、chrome、ie8.0均有效。

可萬惡的ie6還是不行啊！！而且出來個搗亂的，ie7也不行。別，仔細看看，原來ie6和ie7就沒實現display:inline-block;
修改代碼：

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;;padding:12px;">    最小寬度</p>

先試試ie7，ok大功告成！再試ie6，依然“萬惡”！！別急呀，至少我們明白了min-width的用法，當寬度由內容決定的時候才起作用。多放點內容試試，是不是如我們所想內容超出的話，容器變大？

嗯，果然是。但是有個小問題，就是當內容超過瀏覽器的寬度時，依然會換行。先不管它！先解決ie6.0的問題。

仔細琢磨一下，現在又回到當初的思路了，只有i6有問題。當初是怎麼解決的？哦，ie6.0 的height本身就具備min-height 的特性。那width是不是也如此呢？我們加個_width:220px試試

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;">    最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度</p>

結果很嚴重，我們很失望。我們唯一思路也被隔斷了！種麼辦？種麼辦？....."換行！！？？"那我就讓你不換行！！！

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;white-space:nowrap">    最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度最小寬度</p>

竟然可以了！加點內容！！！

竟然連上面的，超出瀏覽器寬度問題也解決了！試試其它瀏覽器。ie7、ie8、firefox、chrome全部通過。以外收穫！

3 position:absolute 嗯這個看起來也行。

<p style="border:5px solid #f00;position:absolute;min-width:220px;_width:220px;padding:12px;white-space:nowrap">    最小寬度</p>

加些內容：

依然可以，預期達到。

4 float:left 這種情況最常用。應該也行！

上代碼：

<p style="border:5px solid #f00;float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap">    最小寬度</p>

同樣加些內容：

預期達到！

我能想到就這幾種情況，當然裡面有分析不到位的地方，請不吝指正。有些瀏覽器，沒有測，測試完給個結果，不行的話，再想辦法。