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