使CSS兼容IE 和 Firefox的根本秘訣,網站設計必學
要使IE/Firefox 兼容CSS效果問題基本一致,以免太多人用forefix看見奇醜無比的頁面,其實這區別也不是很大,只是在處理上多加一點小技巧而已,下面我向大家介紹一下遇見這樣的問題應該怎麼處理。
首先你要明白IE/Firefox的根本區別就是BOX模型不一致所導致的,其實CSS 』width' 指的是標準CSS中所指的width的寬度,在 firefox中的寬度就是這個寬度。firefox還是比較遵循W3C標準的,它只包含容器中內容的寬度。而Internet Explorer 』 width'則是指整個容器的寬度,包括內容,padding ,border。
Firefox中:容器佔的寬度=內容寬度+padding寬度+border寬度
IE中:內容寬度=您定義的容器寬度(Internet Explorer 』width')-padding寬度-border寬度
所以,如果IE中定義 width:120px;padding:5px 的話,所顯示的寬度就是120px. 即padding:5px是在width裡面。 而Firefox中,上面這個定義,顯示寬度就是 125 px; 所以,我們就必須這樣定義:
width:115px !important;width:120px;padding:5px; !important; 一定要在前面 而且還要有個空格
除了!important外還有兩種方法 2:大於號「>」 3:還有這種註釋/**/ 下面分別說一下:
方法1. !important 一定記得一個屬性的後面打一個『空格』然後緊跟!important 這樣寫之後 IE 和 Firefox就分道揚鑣了。
#head {width: 100px !important; width: 70px;} IE 說 它是70px 因為IE 不認識『!important(提升優先權)』發現了重複定義width時候就按最後一個來顯示Firefox說 它是100px 因為Firefox認識『!important'根本不甩後邊那句。
方法2是這麼寫的
#head {
width: 100px;
width /**/: 70px;
}IE 認為它寬100px 因為它會把有/**/的那一行屬性定義給註釋掉。而Firefox 則認為它寬70px 因Firefox只註釋/**/之間的東西而不是整行屬性都作廢都註釋掉注意它們之前必須的哪個空格。
方法3就 比較容易理解和使用了。這個大於號 只有IE 大爺才能認識 真是佩服IE的強悍 連大於小於號都能解析。其他瀏覽器就沒這麼牛了。#head { width: 100px; >width: 70px;}