對於經常做網頁設計的人員來說,網頁的兼容性測試是不可缺少的,記得剛來單位的新手,都是要安裝一款瀏覽器測試軟件的,看自己制作的網頁是否在各大瀏覽器中正常顯示,有沒有變形,或者網頁效果不兼容等。
不僅僅是新手學習的過程中會遇到,即使是資深的前端程序員,網站樣式的兼容性往往很讓人頭疼,雖然W3C提出了一套標准,但是瀏覽器廠商往往不會完全按照標准來,這當中以微軟為最奇葩的代表,每代IE都各有特點,問題也不僅僅存在於IE身上,其他瀏覽器也很難說自己就沒有問題。所以在設計網站時一定要注意瀏覽器兼容性。
第一:作為網站前端設計人員遇到任何問題一定是先找出原因
其實,瀏覽器兼容性問題主要來自於兩個方面:css樣式兼容性和javascript腳本兼容性,雖然兼容性問題出現在這兩方面,但是這里面的問題之多,不是幾百個字的文章能說得完的,今天筆者也只能簡單的說一些原則性的注意點,可以幫助改善瀏覽器兼容性問題。
1、css兼容性問題:瀏覽器的數量太多,我們只能針對內核來進行划分,這樣主流的瀏覽器主要是三個內核:微軟的trident內核、FF的mozilla內核、chrome為代表的webkit內核。其中微軟又有問題就是IE6、7、8等等雖然是一個系列的內核,但對css的解釋又存在不同。總體來說做瀏覽器兼容性測試只要測試通過了上述瀏覽器,一般問題就不大了。在css兼容性問題有一種是所謂先天缺陷,就是某些標簽、樣式本身就存在不兼容,例如我們再寫DIV透明的時候,那么IE6解析與其他瀏覽器本身確實就不相同;或者是PNG圖片在IE不兼容,那么這種問題應該說是“真正的不兼容”。同時要注意如果不是必要,不要采用自動高寬方式,盡量限制好頁面內元素的高寬,這樣可以最大限度的處理好css樣式兼容性問題。
2、javascript兼容性問題:這個也是個非常麻煩的問題來源,主要的問題依然來自於IE瀏覽器系列和其他瀏覽器的差別:IE調用的是系統組件,而其他瀏覽器調用的自己內建的組件,這就造成了你必須針對不同的瀏覽器調用不同的組件,最典型的方面莫過於ajax。但其他瀏覽器之間的問題也一樣不少,我見過的問題就有:RGB值的表示方式的不同,offsetleft取出的值不同,還有前篇文章提到的readystate的解釋不同等問題。javascript的問題有相當一部分可以靠一些腳本插件如jquery來改善,但要想做完善,需要針對不同瀏覽器進行詳細的測試。
第二:瀏覽器兼容性測試工具要齊全有一個好的工具能幫助你省不少的事!
一般來說我用的是IETest和IE Collection這兩個工具。IETester可以幫我們模擬頁面在IE5.5、IE6、IE7與 IE8 beta1等瀏覽器的相容性,驗證CSS樣式或網站版面是否可以在各個主要瀏覽器正常顯示。IETester以“分頁標簽”的方式分別在不同的頁簽中顯示,軟件采用了類似於Office2007的界面呈現方式,使用起來非常方便。
除了IETester,另外還有IE Colection也可以解決多IE版本共存問題。 IE Collection包含了IE1.0、1.5、3.0、5.5、6.0、7.0、8.0等版本的網絡瀏覽器。通過IE Collection,設計師可以在不同的IE里面測試版面樣式與功能。此外,IE Collection還提供了Internet Explore Developer Toolbar工具,通過這些工具檢查網頁內容的樣式、版面錯亂或程序錯誤等。

網頁設計界有這樣一句話,只要網頁在火狐瀏覽器中兼容性沒有問題,哪么在其他瀏覽器中出現兼容性的問題可能性就很小,這要得易於火狐瀏覽器對於網頁代碼的嚴格規范有關了,火狐瀏覽器對網頁代碼的嚴謹程度使得得許多網頁設計者都喜歡使用火狐來進行排版與測試,不得不說火狐是一個好的網頁測試工具,如下圖所示:

移動網頁兼容性測試主要測試不同移動設備顯示上網站的顯示效果。由於用戶移動設備或者瀏覽器往往不同,若不進行測試,會出現樣式錯亂或者圖片無法顯示等問題。對於前端開發工程師來說,確保代碼在各種主流設備和瀏覽器的各個版本中都能正常顯示,因此要對編寫出來的網頁進行兼容性測試。

最后,要告訴大家我們在做網站的時候就要考慮到用戶的瀏覽習慣,以大多數用戶的瀏覽習慣為主,調整網站的兼容性。大家也知道,現在的瀏覽器各式各樣,每個人的瀏覽習慣也各不一樣,做為網站的前端設計師就要考慮到這一點。網站在設計開發的時候要注意調好兼容性,對網站進行多個主流瀏覽器的兼容性調試,能夠有效的保證您的網站在多個瀏覽器下正常的瀏覽。
