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>

 

同样加些内容：

预期达到！

我能想到就这几种情况，当然里面有分析不到位的地方，请不吝指正。有些浏览器，没有测，测试完给个结果，不行的话，再想办法。

以上是css中關於min-height與min-width相容瀏覽器的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！