min-height和min-width兩個最小高度和最小寬度兼容多瀏覽器版本

2024-07-11 08:29:18

字體：大中小

來源：轉載

供稿：網友

文章介紹了min-height和min-width兼容多瀏覽器版本做法，有需要的同學可看看。min-height和min-width這兩個最小高度和最小寬度的容器屬性相信大家并不陌生。先說說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>

上一篇：css span右對齊 css li標簽中span日期靠右布局實現代碼

下一篇：CSS偽類:before在元素之前 :after 在元素之后實例講解

發表評論

共有條評論