所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都應該是統(tǒng)一的顯示效果。所以瀏覽器的兼容性問題是前端開發(fā)人員經(jīng)常會碰到和必須要解決的問題。
總結之后將經(jīng)常遇到的瀏覽器的兼容性問題分為以下九種，其它不常見的關于JS、CSS的兼容性小問題太多，就不再一一羅列，有興趣可以去網(wǎng)上找找，有很多，如果實在沒法解決的情況下可以用CSS hack解決，如果有其他方法解決兼容性，盡可能減少對CSS Hack的使用。Hack有風險，使用需謹慎。
常見的兼容性問題及解決辦法
一、不同瀏覽器的標簽默認的外補丁和內補丁不同
問題表現(xiàn)：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
解決方案：CSS里 ? ?*{margin:0;padding:0;}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0。
二、塊屬性標簽float后，又有橫向的margin情況下，在IE6顯示margin比設置的大
問題表現(xiàn)：IE6后面的一塊被頂?shù)较乱恍?/p>
解決方案：在float的標簽樣式控制中加入display:inline;轉化為行內屬性
備注：橫向浮動的div布局，使用上margin進行邊界設置時，必然會碰到此問題
三、設置較小高度標簽(一般小于10px)，在IE6、IE7，遨游中高度超出設置高度值
問題表現(xiàn)：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度
解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height小于你設置的高度
備注：一般出現(xiàn)在設置小圓角背景的標簽里。出現(xiàn)該問題原因是IE8之前的瀏覽器都會給標簽一個最小默認行高的高度，即使標簽是空內容，標簽的高度還是會有默認行高。
四、行內屬性標簽，設置display:block后采用float布局，又有橫向的margin情況，IE6間距bug
問題表現(xiàn)：IE6的間距比超過設置的間距
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內屬性標簽，為了設置寬度，需要設置為display:block;(表單元素除外)在用float布局且有橫向margin后，在IE6下，就具有了塊屬性float后的橫向margin的bug。由于設置為display:inline，高度失效，所有在后面補上display:table。
五、圖片默認有間距
問題表現(xiàn)：幾個img標簽放在一塊，有些瀏覽器會有默認的間距，有通配符也不起作用
解決方案：使用float屬性為img布局
備注：img標簽是行內屬性標簽，只要不超出容器高度，img會排在一行里，使用float是比較好的選擇
六、標簽最低高度設置min-height不兼容
問題表現(xiàn)：min-height本身就是一個不兼容的css屬性，所以設置min-height時不能兼容所有瀏覽器
解決方案：如果設置一個標簽最小高度為200px，需要進行設置 {min-height:200px; height:auto !important;
height: 200px; overflow:visible;}
備注：b/s系統(tǒng)前端時，當內容小于一個值時，容器的高度保持該值，當內容大于該值時，高度自適應且不出現(xiàn)滾動條。
七、光標手形
問題表現(xiàn)：firefox不支持hand，但ie支持pointer
解決方案：統(tǒng)一使用cursor:pointer;
八、字體大小定義不同
問題表現(xiàn)：對字體大小small定義不同，F(xiàn)irefox為13px，而IE為16px，差別比較大
解決方法：使用指定的字體大小如14px或者使用em
九、IE6 3px bug
問題表現(xiàn)：左側div浮動left，右邊DIV可以接著橫向排列，形成典型一列固定，第二列自適應，IE6出現(xiàn)之間3px間隙
解決方法：對左側left的盒子補上_margin-right: -3px;
十、其它方面
如果要減少瀏覽器兼容性問題的出現(xiàn)，可以分兩種情況：
第一種是企業(yè)內部系統(tǒng)：通常會采用一些現(xiàn)成的UI技術，如ext、flex或其它UI框架完成。這些技術自己已經(jīng)有相當好的瀏覽器兼容了。
第二種是互聯(lián)網(wǎng)的：通常也會采用一些JS框架作輔助，如jQuery等作對dom、事件、ajax的兼容，頁面上使用hack技術，如IE的*開始的選擇器和條件注釋作兼容。
css hack
先舉一個小例子，簡要說明一下CSS hack是干啥的。
比如要分辨IE6和firefox兩種瀏覽器，可以這樣寫：
div{
background:green;/*forfirefox*/
*background:red;/*forIE6*/(bothIE6&&IE7)
}
我在IE6中看到是紅色的，在firefox中看到是綠色的。
解釋一下：
上面的css在firefox中，它是認識不了后面的那個帶星號的東西是什么的，于是將它過濾掉，不予理睬，解析得到的結果是:div{background:green},于是理所當然這個div的背景是綠色的。
在IE6中呢，它兩個background都能識別出來，它解析得到的結果是:div{background:green;*background:red;},于是根據(jù)優(yōu)先級別，處在后面的red的優(yōu)先級高，于是當然這個div的背景顏色就是紅色的了。
css hack就是通過這種方式來對瀏覽器進行兼容性處理。也就是通過在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號（什么樣的瀏覽器識別什么樣的符號是有標準的，CSS hack就是讓你記住這個標準），以達到應用不同的CSS樣式的目的。因此我們就可以根據(jù)不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
針對不同瀏覽器的網(wǎng)站設計代碼總結如下
1、針對I E 系列瀏覽器的網(wǎng)站設計代碼 ? ? ?
?針對 IE 6 的專屬 CSS Hack 網(wǎng)站設計代碼 ? ? ? ?#id{ ?_display: block; ?} 也就是在網(wǎng)站設計CSS屬性前加一個小劃線就好。 ? ? ?
?針對 IE 7 的專屬 CSS Hack 網(wǎng)站設計代碼 ? ? ? ?#id{ *display: block; } 即在網(wǎng)站設計CSS屬性前加上一個星號。 ? ?
?針對 IE 8 的專屬 CSS Hack 網(wǎng)站設計代碼 ? ? ? ?#id{ margin-top: 10px /9; /*IE8*/} 如上所示，解決辦法為在網(wǎng)站設計CSS屬性后分號前加上空格與斜線并加入一個數(shù)字9即可 ?。
2、針對火狐的CSS Hack 網(wǎng)站設計代碼 ? ?
想要解決火狐的兼容性只要將CSS代碼寫入到 @-moz-document url-prefix（）{ } 里面就行了 , 例如 ?@-moz-document url-prefix() ?{ ? ?#id{ display: block; } ?} ?。
3、針對 Safari 的CSS Hack 網(wǎng)站設計代碼 ?
Safari是蘋果中新的瀏覽器，解決兼容性的做法是加上@media screen and (-webkit-min-device-pixel-ratio:0)前綴。例如@media screen and (-webkit-min-device-pixel-ratio:0) ?{ ? ?#id { display: block; } ?} ?兼容性做法和火狐相近。
4、針對 Opera 的CSS Hack 網(wǎng)站設計代碼
Opera解決兼容性的做法也是加上選擇器前綴，例如 @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)站設計更好的與各種瀏覽器兼容的時候其實已經(jīng)違反了網(wǎng)站制作的W3C標準。
參考網(wǎng)頁：http://bbs.jointforce.com/topic/20742?utm_source=tuicool&utm_medium=referral
