如何使用important解決firefox和ie的css兼容問題

這篇文章主要講解了“如何使用important解決firefox和ie的css兼容問題”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用important解決firefox和ie的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兼容問題”的內容了，經過本文的學習后，相信大家對如何使用important解決firefox和ie的css兼容問題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！