網站建設必備：如何做到網站瀏覽器兼容？

IT市場越是發達，可供網民們使用的網絡工具就越多，這其中包括各色各樣的瀏覽器，不同風格不同習慣的瀏覽器雖然在最大程度上滿足了不同愛好的網民朋友但卻給網站設計師們帶來了困惑。
為了能讓自己的網站設計正常的運行于各種瀏覽器平臺，建設網站時程序員都會裝有多款的瀏覽器，來測試網站的兼容，如果有某種瀏覽器不能正常顯示，就意味著需要調整了。
那么問題來了，全球這么多瀏覽器，都要做兼容嗎？
目前全球市面的上瀏覽器非常多，也許足有100多種，但我們在網頁制作過程中，只需要對主流瀏覽器進行兼容測試。這包括：IE、火狐(Firefox)、谷歌(Chrome)、蘋果(Safari)、Opera等幾款全球應用范圍最廣的瀏覽器。
一、常見的兼容性問題
1.BUG：不同瀏覽器標簽默認的margin和padding不同。 
   Hack:css里增加通配符*{margin：0；padding：0} 
2.BUG：圖片默認又間距。 
   Hack:使用float為img布局 
3.BUG：當標簽的高度設置小于10px，在IE6、IE7中會超出自己設置的高度 
  Hack：超出高度的標簽設置overflow：hidden，或者設置line-height的值 小于你的設置高度 
4.BUG：IE9以下瀏覽器不能使用opacity
  Hack：filter：alfha（opacity=50） 備注：這里面的opacity的值取值范圍 （1-100），相當于正常設置opacity：0.5。 
5.BUG：IE與寬度和高度的問題。(IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。如果只用寬度和高度，正常的瀏覽 器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度。在設置背景圖片的時候會用到)
  Hack:#box{width: 80px;height: 35px;}html>body #box{width: auto;height: auto;min-width: 80px;min-height: 3 5px;} 
瀏覽器兼容性問題解決的辦法都是實踐中來到實踐中去，有很多前輩給我們做了鋪墊，但凡事都有局限性，所以，遇到了問題我們也必須去克服。
二、避免兼容性的技巧
我們整理了幾條編碼模式與經驗來解決支持舊IE瀏覽器的技巧分享給大家。
1、使用模板如HTML5 Boilerplate進行開發
很多成熟的模板各方面都做得很到位，這些準則對以現代瀏覽器為目標的項目和需要舊瀏覽器（低至IE6都能很好的支持）支持的項目工作得一樣好。直接拿來使用不但可以節省時間更能減少一些IE兼容問題。
2、使用標準是IE10來開發項目
它能實時分析你的網站，準確的找到問題的類型并給出解決方法。通過在你的代碼中包括一個簡單的JavaScript腳本文件，在你的頁面你就能得到可視化的結果。它也可以被集成進Fidder HTTP分析工具。
3、不盲目使用polyfills和shims
polyfills和shims提供了代碼和標簽，可以幫助模擬標準的API和功能，但在使用時一定要能保證實用，更便于以后的開發和修改。
4、多版本多瀏覽器測試，確認無誤后再上線。
檢查有沒有警告或錯誤信息后，再提交項目，不然讓客戶或老板發現了多尷尬。
5、使用標簽
最新的HTML5標簽，改善了標簽的語義化，但需要特殊的輔助腳本讓IE6，7和8認識他們。頁面在太舊的瀏覽器或者禁止腳本時無法使用HTML5標簽，那么使用標簽是對這些情況比較靠譜的解決方法。
6、css文件應該在head里引入，js最后引入。
如果body中引入CSS會導致頁面全空，直到CSS加載后才顯示。若在頭部引入則讓瀏覽器盡早地讀取他們，就可以避免上述的情況。Js在最后引入則可以加快網站的打開速度，能很好的提高用戶體驗。
7、簡潔、特定瀏覽器的css樣式。
不要到處是無法重用的的id和class，避免使用"！imporant"。為html或body標簽添加特定瀏覽器的class，并在css規則中使用。而不是hack。這樣不但利于seo網站優化，更讓二次開發提供便利。
8、JavaScript最大限度以用戶體驗為中心
盡可能在Ready后立刻執行腳本。如果Ajax關系用戶交互，越早請求越好，延遲加載非必要的腳本（如Facebook Like，Google +1，Twitter）等。
新網網站建設，為您提供一站式網站建設推廣方案：http://www.xinnet.com/jianzhan/zizhujianzhan.html