CSS、JS在不同瀏覽器的兼容性問題

1.css在不同瀏覽器下顯示效果不同

firefox和IE對某些css樣式的認定有不少區別,包括:

  • ul和ol的默認padding值是不一樣的,在Firefox中,padding-left默認值爲40px左右,而IE中爲0,只能將它們指定爲20px才保證在兩個瀏覽器中顯示效果一樣;
  • 對字體大小small的定義不同,Firefox中爲13px,而IE中爲16px,差別挺大,也只能設置爲14px了事;;
  • 並列排列的多個元素(圖片或者鏈接)的div和div之間,代碼中的空格和回車在firefox中都會被忽略,而IE中卻默認顯示爲空格(約3px);
  • 對不規範代碼的兼容情況不同,IE中漏掉的關閉符號對顯示不造成影響,而firefox中就會形成錯亂的佈局,而在ie中用到的padding和margin的負值都會被firefox解析爲0,易造成佈局的混亂;
  • firefox對於長高尺寸的嚴格解析會造成與設置不匹配(超出)的圖片或表格將原設置div撐大;
  • !important屬性可以在除IE瀏覽器的其他瀏覽器中起作用,因此有人利用這種差別來令一個CSS兼容多種瀏覽器;
  • 未定義id的div,在IE中會與div屬性中的其他設置有關,而在firefox中的位置會於div在文件中位置有關,緊隨前一個div出現……


解決這種問題可以通過規範css代碼,使其符合兩種規範的標準樣式,也可以在差別處利用!important對firefox設置屬性,或者針對多種瀏覽器分別各自配置合適的CSS文件,再通過判斷瀏覽器選擇不同CSS實現兼容性,我選擇的是最後這種方法。

http://roozeno.blogbus.com/files/1160706558.jpg

2.顯示器尺寸的適應問題

最初設計時,根據在某網站作的統計,使用800×600的顯示器的用戶數比例很少,可是隨數據量的增大,這部分用戶已達到 6.5%左右,不得不計入考慮。除首頁CSS佈局限制較爲固定之外,其他所有頁面的都使用%定義div寬度,則可以根據顯示器分辨率自適應調節,以不影響顯示效果,需要解決的問題主要是首頁。

首頁設計中,曾經考慮過這個問題,因此在左邊的800×600分辨率可顯示的區域是站點內容的主體,右邊是新聞列表和一些宣傳浮動圖標的預留區,因此只要在用戶瀏覽時令橫向滾動條消失自然就可以了。

許多網絡上的經驗都是在body中設置overflow-x屬性爲hidden來實現
body { overflow-x : hidden ; }
不過我用此方法測試多次都無效,後來纔在charles大俠blog中發現原因:

http://roozeno.blogbus.com/files/1160706594.jpg

3.動態top按鈕對本人制作的CSS和DIV的不兼容

利用js文件製作的top按鈕,一種經典的顯示效果,即按鈕可以隨着屏幕的滾動在屏幕上滑動(速率變化),始終保持在合適的部位。可是曾經用在html文件中沒有問題在本人的css+div佈局中就屢屢報錯,不是顯示部位不對,就是被別的層遮擋住,或者沒有那種自上而下隨屏幕滾動平滑下移的效果。經笑笑幫忙測試,在其他的html和div佈局中都能顯示正常,因此可能與本人css屬性中過多使用z-index屬性有關。最終問題也沒有解決,只是中和成令一種固定位置的top按鈕。兩種方案分享如下。

滑動的top按鈕(鼠標移動上去可以變換圖片)

http://roozeno.blogbus.com/files/1160706621.jpg

http://roozeno.blogbus.com/files/1160706655.jpg

http://roozeno.blogbus.com/files/1160706682.jpg

http://roozeno.blogbus.com/files/1160706713.jpg

固定的top按鈕(似乎應該是固定在屏幕的某個位置,只是於我的css不兼容)

http://roozeno.blogbus.com/files/1160706752.jpg

4.某些js導航菜單對forefox兼容性不好

本來用jsmenu做了一個導航菜單,是移動到一級欄目橫向顯示此目錄下分類的效果,但是在firefox中顯示後就無法隱藏了,最後多個層疊加在一起很混亂。js與firefox之間的兼容性問題主要有以下一些(摘自站長吧的《JS的IE和Firefox兼容性彙編》):

1. document.form.item 問題 2. 集合類對象問題 3. window.event 4. HTML 對象的 id 作爲對象名的問題 5. 用idName字符串取得對象的問題 6. 變量名與某 HTML 對象 id 相同的問題 7. event.x 與 event.y 問題 8. 關於frame 9. 在mf中,自己定義的屬性必須getAttribute()取得 10.在mf中沒有 parentElement parement.children 而用 11.const 問題 12. body 對象 13. url encoding 14. nodeName 和 tagName 問題 15. 元素屬性 16. document.getElementsByName() 和 document.all[name] 的問題

由於對JS不夠熟悉,只能轉而尋求其他方法。後來使用了css和div聯合控制的菜單,效果很好,尤其是提出將導航菜單做到程序中調用,可以顯示出“where are you"的效果。如今網頁頭部和菜單已全部抽出,令人欣喜的是在新增了top按鈕的情況下耽擱頁面的文件一般在5、6k上下(除個別含多個表格的頁面),與CSS改版前的25k左右,和導航抽取前的12k左右相比又減少了許多。同事用.net通過傳參調用就改進了導航菜單,還將其抽取到一個文件中,較之 DW的模板更新又大大進了一步,會編程真了不起。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章