iT邦幫忙

20

解決IE6不支援css min-width與min-height

  • 分享至 

  • xImage
  •  

min-width與min-height在css中是相當好用的語法,可以讓HTML元素最少仍保持一定的寬和高,而需要時仍隨著元素的內容增加寬和高。

這麼好用的語法,偏偏IE 6不支援,不過說不支援也不精確,事實上IE6本身在指定height與width的值時,就具有min-width和min-height的特性,只是如果單純用height或width來指定,到了Firefox或IE 7時,又會把它當作是鎖死的值,不會因內容增加而擴大元素的box。
解決的方法先看語法

最小高度的解決

.Elm {
min-height:100px;
height: auto !important;
height: 100px;
}

最小寬度的解決
.Elm {
min-width:100px;
width: auto !important;
width: 100px;
}

裡面的祕訣,是先利用較新的瀏覽器認得min-width/height,因此透過它來指定值,而IE舊版的瀏覽器則是透過width/height取值。

不過這裡有個衝突,就是新的瀏覽器也認得width/height,因此min-width/height會被width/height改寫,解決的辦法,就是中間那一行

height: auto !important;(以及width: auto !important;)

由於它標示!important,所以下面那行height無法取代上面這一行,間接變成新的瀏覽器忽視掉第三行,而讓高度不受第三行影響。

另外由於舊的IE瀏覽器不認得 min-height和 !important的意思,所以它還是只吃第三行的語法,這樣就可以相安無事,皆大歡喜。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
plutosrita
iT邦研究生 1 級 ‧ 2008-03-31 12:23:49

謝謝分享

0
john651216
iT邦研究生 1 級 ‧ 2008-03-31 17:26:26

謝謝分享,這樣遇上這樣的問題就可以解決

0
5min
iT邦好手 3 級 ‧ 2008-04-02 14:45:09

好分享

0
xsenie628
iT邦新手 1 級 ‧ 2008-04-03 01:59:58

謝謝你提供這麼好的資訊,

0
tgunlu
iT邦研究生 1 級 ‧ 2008-04-21 23:19:38

謝謝分享

0
fanylu60
iT邦研究生 1 級 ‧ 2008-04-21 23:30:14

非常好的資訊

0
yce701116
iT邦研究生 1 級 ‧ 2008-04-21 23:40:22

感謝分享這個資訊

0
cwshyang
iT邦新手 3 級 ‧ 2008-04-22 01:25:46

最近剛好有用到, 很不錯的分享!!

0
海綿寶寶
iT邦大神 1 級 ‧ 2008-04-28 17:38:37

雖然用不到, 還是謝謝分享

0
funkent
iT邦高手 1 級 ‧ 2008-05-14 21:08:20

什麼情況會讓IE當阿

0
tyc1220
iT邦研究生 1 級 ‧ 2008-05-22 02:55:01

感謝分享這個資訊

我要留言

立即登入留言