首頁 > web前端 > css教學 > 用!important解決IE和Mozilla的佈局差異_CSS/HTML

用!important解決IE和Mozilla的佈局差異_CSS/HTML

WBOY
發布: 2016-05-16 12:12:23
原創
1217 人瀏覽過

在設計《網頁設計師》頁面的時候,有一個問題一直困擾著我,主選單在IE和其他(Mozilla、Opera等)瀏覽器裡顯示的效果偏差2px。截圖如下:

IE中的效果

IE中的效果

Mozilla Firefox中的效果

Firefox中的效果

這是因為IE對盒之間距離的解釋的bug造成的(參考onestab的" 浮動模型的問題 ")。我一直沒有解決這個問題,直到我翻譯 " "時,作者的一個技巧提示幫我找到了解決的方法:用!important。

!important是CSS1就定義的語法,作用是提高指定樣式規則的應用優先權(參見:W3.org的解釋)。語法格式{ sRule!important },即寫在定義的最後面,例如:

box{color:red !important;}

最重要的一點是:IE一直都不支援這個語法,而其他的瀏覽器都支援。因此我們就可以利用這一點來分別給IE和其他瀏覽器不同的樣式定義,例如,我們定義這樣一個樣式:

.colortest { 
border:20px solid #60A179 !important;
border:20px solid #00F;
padding: 30px;
width : 300px;
} 
登入後複製

在Mozilla中瀏覽時候,能夠理解!important的優先級,因此顯示#60A179的顏色:

Mozilla中显示#60A179的颜色

在IE中瀏覽時候,不能夠理解!important的優先級,因此顯示#00F的顏色:

IE中显示#00F的颜色

可以看到,利用!important,我們可以針對IE和非IE瀏覽器設定不同的樣式,只要在非IE瀏覽器樣式的後面加上!important。因此,上面提到的我的主頁2px的顯示差異也輕鬆解決:

PADDING-TOP: 11px !important;
PADDING-TOP: 9px;

!important必定成為CSS佈局的利器,請記住並掌握它吧:)

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板