所謂的瀏覽器兼容性問題没咙，是指因為不同的瀏覽器對同一段代碼有不同的解析舞骆，造成頁面顯示效果不統(tǒng)一的情況蚜枢。在大多數(shù)情況下妇蛀，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)凌摄，都應該是統(tǒng)一的顯示效果羡蛾。所以瀏覽器的兼容性問題是前端開發(fā)人員經常會碰到和必須要解決的問題。
總結之后將經常遇到的瀏覽器的兼容性問題分為以下九種锨亏，其它不常見的關于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框架完成盗尸。這些技術自己已經有相當好的瀏覽器兼容了柑船。
第二種是互聯(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)站設計更好的與各種瀏覽器兼容的時候其實已經違反了網(wǎng)站制作的W3C標準绍移。
參考網(wǎng)頁：http://bbs.jointforce.com/topic/20742?utm_source=tuicool&utm_medium=referral
作者：櫻桃小丸子兒
鏈接：http://www.reibang.com/p/f971aae86f4d
來源：簡書
著作權歸作者所有悄窃。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處蹂窖。
