用CSS+DIV來寫網站代碼的好處顯而易見,這裏不多說了,但由於不同瀏覽器對CSS的解釋不統一,造成不同瀏覽器下頁面錯位的現象十分常見……
頁面亂的原因是因為IE6認為一個DIV超寬了,所以把本應float;right的DIV擠了下去。而如果設置為IE6下顯示正常的寬度,則在IE7和Firefox下看頁面就會少了一塊一樣,也很別扭….
怎麽辦?用CSS HACK 來改寫CSS代碼
改寫前:xxx. yyy:{width:600px;} (當設為IE7和Firefox下顯示正常的600px時,IE6下會錯位,改為590px,則IE6下正常,IE7和Firefox下顯示不完美)
改寫後: xxx. yyy{width:600px;* width:600px;_ width:590px;}
(Firefox不認識*和_,而IE都認識*,IE7不支持_,IE6支持_)
順序千萬不要亂,因為當出現重復定義時,瀏覽器默認按最後一下渲染,所以一定要先正常,再*,最後_。
這樣Firefox讀取時只看到了正常的定義,而IE都能看到第二個*的定義,於是忽略第一個正常的定義,而IE中因為IE7不再支持_,所以按照第一個帶*號的執行,IE6支持_,所以認為帶*後的也是重復定義,予以忽略,執行最後一個定義。
有人喜歡用!important來進行CSS HACK,但我覺得!important寫起來太長了,不如*和_簡單直觀。
只要記住IE7=*,IE6=_,然後按照先Firefox後IE7,最後IE6的順序進行編寫,一般就可以保證大部分用戶瀏覽正常了。