如何解決瀏覽器兼容問題總結(jié)
作者：程序員小鋒子
發(fā)表日期：2016-5-29
* 主流瀏覽器有5種，分別是：IE浆洗、chrome、firefox抠刺、safari摘昌、opera. *
一. CSS Hack
為了能讓網(wǎng)站設(shè)計正常的運行于各種瀏覽器平臺，網(wǎng)站設(shè)計師們不得不想盡辦法處理好網(wǎng)站建設(shè)中的瀏覽器兼容問題聪黎。正是因為網(wǎng)站設(shè)計當(dāng)中的這一需要產(chǎn)生了一項新技術(shù)— CSS Hack稿饰。 CSS Hack 就是針對不同瀏覽器寫出不同的 CSS code 的過程，主要用來解決目前各類瀏覽器無法標(biāo)準(zhǔn)解析CSS樣式喉镰，導(dǎo)致同一網(wǎng)站設(shè)計頁面在不同瀏覽器下出現(xiàn)顯示效果不一致的兼容問題。 針對不同瀏覽器生真，可以將CSS Hack 網(wǎng)站設(shè)計代碼整理如下：
- 針對I E 系列瀏覽器的網(wǎng)站設(shè)計代碼 針對 IE 6 的專屬 CSS Hack 網(wǎng)站設(shè)計代碼 #id{ _display: block; } 也就是在網(wǎng)站設(shè)計CSS屬性前加一個小劃線就好捺宗。 針對 IE 7 的專屬 CSS Hack 網(wǎng)站設(shè)計代碼 #id{ display: block; } 即在網(wǎng)站設(shè)計CSS屬性前加上一個星號即可 針對 IE 8 的專屬 CSS Hack 網(wǎng)站設(shè)計代碼 #id{ margin-top: 10px 9; /IE8*/ } 如上所示，解決辦法為在網(wǎng)站設(shè)計CSS屬性后分號前加上空格與斜線并加入一個數(shù)字9即可 产弹。
- 針對火狐的CSS Hack 網(wǎng)站設(shè)計代碼 火狐可謂是最標(biāo)準(zhǔn)的瀏覽器之一了弯囊，網(wǎng)站設(shè)計技術(shù)只要稍稍不到位就能體現(xiàn)得淋漓盡致，所以不少網(wǎng)站設(shè)計師也很頭痛匾嘱，其實想要解決火狐的兼容性除了要把網(wǎng)站設(shè)計的基礎(chǔ)知識扎牢之外只要將CSS代碼寫入到下圖 @-moz-document url-prefix（）{ } 里面就行了 @-moz-document url-prefix() { #id{ display: block; } } 霎烙。
- 針對 Safari 的CSS Hack 網(wǎng)站設(shè)計代碼 Safari是蘋果計算機的最新作業(yè)系統(tǒng)Mac OS X中新的瀏覽器蕊连，用來取代之前的Internet Explorer for Mac游昼，使用了KDE的KHTML作為瀏覽器的運算核心。 @media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近烘豌。
- 針對 Opera 的CSS Hack 網(wǎng)站設(shè)計代碼 Opera即Opera Software ASA，是臺式機囚聚、各種設(shè)備和移動網(wǎng)絡(luò)瀏覽器市場的商業(yè)領(lǐng)袖标锄，因快速、小巧和比其他瀏覽器更佳的標(biāo)準(zhǔn)兼容性獲得了國際上的最終用戶和業(yè)界媒體的承認(rèn)谓松，并在網(wǎng)上受到很多人的推崇瓶蝴。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 這個世界上必然不會存在絕對完美的事物租幕，因此運用以上方法讓我們的網(wǎng)站設(shè)計更好的與各種瀏覽器兼容的時候其實已經(jīng)違反了網(wǎng)站制作的W3C標(biāo)準(zhǔn).
二. HTML
- 最突出也是最容易想到的就是高版本的瀏覽器用了低版本的瀏覽器無法識別的元素，從而導(dǎo)致不能解析劲绪。這點主要體現(xiàn)在html5的新標(biāo)簽上 解決辦法是：htmlshim框架可以讓低于IE9的瀏覽器支持html5
- img的alt屬性贾富，在圖片不存在的情況下，各瀏覽器的解析不一致 在chrome下顯示的是一張破損的圖片颤枪，在ff下顯示的是alt的文字，而在IE中顯示的是破損的圖片加文字
- ul標(biāo)簽內(nèi)外邊距問題 ul標(biāo)簽在IE6\IE7中扇住，有個默認(rèn)的外邊距盗胀，但是在IE8以上及其他瀏覽器中有個默認(rèn)的內(nèi)邊距
三. JavaScript
- 標(biāo)準(zhǔn)的事件綁定方法函數(shù)為addEventListener，但I(xiàn)E下是attachEvent女阀；
- 事件的捕獲方式不一致，標(biāo)準(zhǔn)瀏覽器是由外至內(nèi)浸策，而IE是由內(nèi)到外，但是最后的結(jié)果是將IE的標(biāo)準(zhǔn)定為標(biāo)準(zhǔn)
- 我們常說的事件處理時的event屬性琼了，在標(biāo)準(zhǔn)瀏覽器其是傳入的夫晌，IE下由window.event獲取的。并且獲取目標(biāo)元素的方法也不同晓淀，標(biāo)準(zhǔn)瀏覽器是event.target凶掰，而IE下是event.srcElement
- 在低版本的IE中獲取的日期處理函數(shù)的值不是與1900的差值，但是在高版本的IE中和標(biāo)準(zhǔn)瀏覽器保持了一致懦窘，獲取的值也是與1900的差值。 比如：var year= new Date().getYear();
- ajax的實現(xiàn)方式不同港华，這個我所理解的是獲取XMLHttpRequest的不同午衰，IE下是activeXObject
- IE中不能操作tr的innerHtml
- 獲得DOM節(jié)點的父節(jié)點、子節(jié)點的方式不同 其他瀏覽器：parentNode parentNode.childNodes IE：parentElement parentElement.children
注釋： 包括自己日常練習(xí)碰到的橙数，包括自己在網(wǎng)上看到別人整理的帅戒，所以有很多不足。參看作者有：作者：15910715277
如有補充逻住，請在下面補充，大家一起學(xué)習(xí)瞪醋，謝謝大家装诡。
