| 導購 | 订阅 | 在线投稿
分享
 
 
 

css一招解決不同浏覽器頁面錯位

2008-10-02 07:47:43  編輯來源:互聯網  简体版  手機版  評論  字體: ||
 
  用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的順序進行編寫,一般就可以保證大部分用戶浏覽正常了。
 
用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的順序進行編寫,一般就可以保證大部分用戶浏覽正常了。
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
  免責聲明:本文僅代表作者個人觀點,與王朝網絡無關。王朝網絡登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
© 2005- 王朝網路 版權所有