兼容瀏覽器的min-height和min-width

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

轉文請標明 --- 出處：穆乙 http://www.cnblogs.com/pigtail/

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

看下面試例：

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

運行圖以下：

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

 

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

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

扯遠了........

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

腦子忽然冒出一個現象！

代碼：

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

 當給容器一個高度的時候，標準瀏覽器是這樣的處理的，若是沒有設置overflow的狀況下，內容會超出但容器的高度不會變！這時候，咱們又回到了前面，若是要自適應高度的話，固然去掉height屬性。有時候咱們須要一個最小的高度佔據必定的空間。因此引出min-height屬性。但可悲的是ie6.0不支持！！

但是一樣的代碼咱們在ie6.0裏測試結果是這樣的：

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

因而乎，咱們不得不對ie6.0採用hack (_height:120px)技術。這裏我說「不得不」是由於我極度討厭用hack。箇中滋味本身體會，個人原則是，能不用hack儘可能不用。

代碼以下：

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

經測試，預期達到。

 

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

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

先來測試一下：

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

但是結果讓咱們非常意外，全部瀏覽器裏通通失效：

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

哦，原來是這麼回事，咱們得讓容器的默認寬度是內容多少來決定。

由此我想到了幾種狀況：

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

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

代碼以下：

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

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

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

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

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

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

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

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

 

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

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

 

居然能夠了！加點內容！！！

居然連上面的，超出瀏覽器寬度問題也解決了！試試其它瀏覽器。ie七、ie八、firefox、chrome所有經過。之外收穫！

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

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

 

加些內容：

 

依然能夠，預期達到。

 

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

上代碼：

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

 

一樣加些內容：

預期達到！

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