important的妙用解決firefox和ie的css相容問題

標籤：firefox   屬性   設計   相容   text   css   標記   自動   使用者   

對於某些內容可變的層（比如使用者評論），我們希望它有個最小的高度 （比如30px），這樣的話，即使內容只有一行字，也不會太難看；同時又希望在內容比較多的時候，層的高度能自動撐開，也就是要求height: auto。這時候就可以設定css的min-height屬性。min-height在Firefox裡有效，但IE無法識別。 可以使用下面這個解決方案： 

複製代碼代碼如下:
.div_class{ 
min-height:30px; 
height:auto !important; 
height:30px; 
} 

第一行設定 min-height:30px;對Firefox有效；第二行height:auto !important;也對Firefox有效，後面緊跟的“!important”是Firefox專用的一個標記，帶有這個標記的設定具有最高優先 級，之後的設定都無效。所以第三行的height:30px對Firefox無效了；同時，由於IE無法識別min-height和“! important”，所以只有第三行有效，由於IE預設就是高度自適應的，所以即使設定了30px的高度，只要內容很多，也會自動撐開，不需要設定 height:auto。最後，上述代碼產生如下效果： 

對於Firefox，等同於: 

複製代碼代碼如下:
.div_class{ 
min-height:30px; 
height:auto; 
} 

對於IE，等同於： 

複製代碼代碼如下:
.div_class{ 
height:30px; 
} 

“!important” 是個非常好用的東西，如果你寫過幾個月的跨瀏覽器的CSS代碼，就很容易被Firefox和IE之間的差別而感到惱火。比如padding屬性就是一個例子。 

假設這樣一個層： 

複製代碼代碼如下:
.div_name { 
width:100px; 
padding:10px; 
} 

在IE裡面，層的寬度是100px，四周的餘空為10px；但是對於Firefox，層的寬度變成了100px+10px+10px=120px，對於寬度敏感的設計來說，整個就混亂了。怎麼辦呢？還是求助於“!important”吧。只要這樣寫就可以了： 

複製代碼代碼如下:
.div_name { 
width:80px !important; 
width:100px; 
padding:10px; 
} 

因為80+10+10=100。正好讓寬度 變成100px。 

有時候，我們給一個層加上邊框 ，在Firefox裡面也會出現寬度增加的情況，比如： 

複製代碼代碼如下:
.div_name { 
width:100px; 
padding:10px; 
border:2px solid #ccc; 
} 

上面這個層，在Firefox裡面的實際寬度等於100+10+10+2+2=124px，因為邊框也會增加寬度。怎麼辦呢，還是靠“!important”，這樣寫就可以了： 

複製代碼代碼如下:
.div_name { 
width:76px !important; 
width:100px; 
padding:10px; 
border:2px solid #ccc; 
} 

important的妙用解決firefox和ie的css相容問題