專注 網站建設 | 微信小程序開發 | APP開發 | 系統軟件開發 等業務!
咨詢電話:400-8033-215????24小時服務熱線:13372020526

NEWS CENTER ·
技術知識
關注我們 關注前沿

網站前端制作時,常見瀏覽器兼容性問題與解決方案

發表日期:2019-08-06????資訊來源:www.wnkfjdam.cn????

說明:本文為chuyuqing的專欄轉載而來,具體文字內容真實性未驗證,如在網站前端制作的時候,應用本技術,請反復測試。。

 

  所謂的瀏覽器兼容性問題,是指因為不同的瀏覽器對同一段代碼有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論用戶用什么瀏覽器來查看我們的網站或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。

 

  在學習瀏覽器兼容性之前,我想把前端開發人員劃分為兩類:

 

  第一類是精確按照設計圖開發的前端開發人員,可以說是精確到1px的,他們很容易就會發現設計圖的不足,并且在很少的情況下會碰到瀏覽器的兼容性問題,而這些問題往往都死瀏覽器的bug,并且他們制作的頁面后期易維護,代碼重用問題少,可以說是比較牢固放心的代碼。

 

  第二類是基本按照設計圖來開發的前端開發人員,很多細枝末節差距很大,不如間距,行高,圖片位置等等經常會差幾px。某種效果的實現也是反復調試得到,具體為什么出現這種效果還模模糊糊,整體布局十分脆弱。稍有改動就亂七八糟。代碼為什么這么寫還不知所以然。這類開發人員往往經常為兼容性問題所困。修改好了這個瀏覽器又亂了另一個瀏覽器。改來改去也毫無頭緒。其實他們碰到的兼容性問題大部分不應該歸咎于瀏覽器,而是他們的技術本身了。

 

  文章主要針對的是第一類,嚴謹型的開發人員,因此這里主要從瀏覽器解析差異的角度來分析兼容性問題。(相關文章推薦:主流瀏覽器CSS 3和HTML 5兼容清單)

 

  瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補丁和內補丁不同

 

  問題癥狀:隨便寫幾個標簽,不加樣式控制的情況下,各自的margin 和padding差異較大。

 

  碰到頻率:100%

 

  解決方案:CSS里 *{margin:0;padding:0;}

 

  備注:這個是最常見的也是最易解決的一個瀏覽器兼容性問題,幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0。

 

  瀏覽器兼容問題二:塊屬性標簽float后,又有橫行的margin情況下,在IE6顯示margin比設置的大

 

  問題癥狀:常見癥狀是IE6中后面的一塊被頂到下一行

 

  碰到頻率:90%(稍微復雜點的頁面都會碰到,float布局最常見的瀏覽器兼容問題)


相關新聞

contact us

13372020526

  • 電話:400-8033-215
  • 郵箱:[email protected]
  • 網址:http://www.wnkfjdam.cn
  • 地址:南京市廣州路37號江蘇科技大廈25樓

友情鏈接:

南京米雅途網絡科技有限公司 www.wnkfjdam.cn 版權所有 ?備案號:蘇ICP備15005182號

彩经网3d