IE6不支持CSS中的min-width/height屬性問題的解決方法
發(fā)布時(shí)間：2009-09-08 17:34:42 作者：佚名 
我要評論
我要評論min-width與min-height在css中是相當(dāng)好用的語法，可以讓HTML元素最少仍保持一定的寬和高，而需要時(shí)仍隨著元素的內(nèi)容增加寬和高。
這么好的語法，偏偏I(xiàn)E 6不支持，不過說不支持也不準(zhǔn)確，事實(shí)上IE6本身在指定height與width的值時(shí)，就具有min-width和min-height的特性，只是如果單純用height或width來指定，到了Firefox或IE 7時(shí)，又會把它當(dāng)作是鎖死的值，不會因內(nèi)容增加而擴(kuò)大元素的box。
解決的方法先看語法。
最小高度的解決
.Elm {
min-height:100px;
height: auto !important;
height: 100px;
}
最小寬度的解決
.Elm {
min-width:100px;
width: auto !important;
width: 100px;
}
里面的秘訣，是先利用較新的瀏覽器識別min-width/height，透過它來指定值,而IE6則是透過width/height取值。
不過這里有個(gè)沖突，就是新的瀏覽器也識別width/height，因此min-width/height會被width/height改寫，解決的辦法，就是中間那一行。
height: auto !important;(以及width: auto !important;)
由于它標(biāo)示!important，所以下面那行height無法取代上面這一行，見解變成新的瀏覽器忽視掉第三行，而讓高度不受第三行影響。
另外由于IE6不識別 min-height和 !important屬性，所以它還是取第三行的語法，這樣就可以相安無事，皆大歡喜。
解決的方法先看語法。
最小高度的解決
復(fù)制代碼
代碼如下:.Elm {
min-height:100px;
height: auto !important;
height: 100px;
}
最小寬度的解決
復(fù)制代碼
代碼如下:.Elm {
min-width:100px;
width: auto !important;
width: 100px;
}
里面的秘訣，是先利用較新的瀏覽器識別min-width/height，透過它來指定值,而IE6則是透過width/height取值。
不過這里有個(gè)沖突，就是新的瀏覽器也識別width/height，因此min-width/height會被width/height改寫，解決的辦法，就是中間那一行。
height: auto !important;(以及width: auto !important;)
由于它標(biāo)示!important，所以下面那行height無法取代上面這一行，見解變成新的瀏覽器忽視掉第三行，而讓高度不受第三行影響。
另外由于IE6不識別 min-height和 !important屬性，所以它還是取第三行的語法，這樣就可以相安無事，皆大歡喜。
相關(guān)文章
CSS中height和width在IE和其他瀏覽器中的區(qū)別圖文詳解
這篇文章主要介紹了CSS中height和width在IE和其他瀏覽器中的區(qū)別，需要的朋友可以參考下2014-05-12css行內(nèi)元素padding,margin,width,height沒有變化
這篇文章主要介紹了css行內(nèi)元素設(shè)置padding,margin,width,height沒有變化的解決方法，需要的朋友可以參考下2014-05-07- 關(guān)鍵字描述：最大 圖片 控制 這個(gè) var // 寬度 maxwidth if 科汛CMS官方模板中自帶了一段JS用來控制文章中的圖片的最大高度和寬度。不過我也很奇怪，為什么這個(gè)j2009-06-06
整體上看是一本不錯(cuò)的讀物,首先他的編寫結(jié)構(gòu)相當(dāng)清晰,章節(jié)不多,每一章都是逐步深入,非常值得一讀2020-10-12
