兼容各類瀏覽器的min-height

關於實現min-height的問題。

 

網上給出了實現方法

{height:auto !important;min-height:20px;height:20px;}

一看有點傻眼的感受，IE6是不支持min-height屬性的，有了height:auto !important後，ie6還如何實現min-height?

可是事實勝於雄辯，在一個div的css上寫上上面屬性，各個瀏覽器都實現了min-height；對!important語句在ie6下進行測試，用以下代碼：

/*html*/
<p class="timp">測試代碼</p>
/*css*/
p {color:blue !important}
p.timp {color:green}

上述代碼在ie6下文字顏色爲藍色，因爲p.timp選擇符的優先級比p高，說明!important做用正常。

接着測試下面代碼：

/*html*/
<p>測試代碼</p>
/*css*/
p.timp {color:blue !important；color:green}

  結果p標籤裏的元素顏色爲綠色。

 結論：在ie6下使用定義語句並用!important定義同一個屬性的狀況下，!important能夠正常使用。而在同一個語句中定義同一個屬性，!important不起做用，後定義的優先。

所以{height:auto !important;min-height:20px;height:20px;}這段代碼下，ie6的height屬性值爲20px。

 

既然如此直接將代碼改成{height:20px;min_height:20px;}結果發如今標準瀏覽器下發現文字溢出的狀況下，層的高度不會自動增長，緣由在於定義了height的屬性（height的默認值爲auto，即容器的高度會隨着內容的增長而增長），而ie6有一個bug，就是即便定義了height的值，容器高度仍會被內容撐開。

 

知道原理後能夠很容易得出實現min-height的有效代碼爲seletor {min-height:20px; _height:20px;}。