所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段**有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的**或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。
在學習瀏覽器相容性之前，我想把前端開發人員劃分為兩類：
第一類是精確按照設計圖開發的前端開發人員，可以說是精確到1px的，他們很容易就會發現設計圖的不足，並且在很少的情況下會碰到瀏覽器的相容性問題，而這些問題往往都死瀏覽器的bug，並且他們製作的頁面後期易維護，**重用問題少，可以說是比較牢固放心的**。
第二類是基本按照設計圖來開發的前端開發人員，很多細枝末節差距很大，不如間距，行高，位置等等經常會差幾px。某種效果的實現也是反覆除錯得到，具體為什麼出現這種效果還模模糊糊，整體布局十分脆弱。稍有改動就亂七八糟。**為什麼這麼寫還不知所以然。這類開發人員往往經常為相容性問題所困。修改好了這個瀏覽器又亂了另乙個瀏覽器。改來改去也毫無頭緒。其實他們碰到的相容性問題大部分不應該歸咎於瀏覽器，而是他們的技術本身了。
）瀏覽器相容問題一：不同瀏覽器的標籤預設的外補丁和內補丁不同
問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：css裡 *
備註：這個是最常見的也是最易解決的乙個瀏覽器相容性問題，幾乎所有的css檔案開頭都會用萬用字元*來設定各個標籤的內外補丁是0。
瀏覽器相容問題二：塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大
問題症狀:常見症狀是ie6中後面的一塊被頂到下一行
碰到頻率：90%（稍微複雜點的頁面都會碰到，float布局最常見的瀏覽器相容問題）
解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化為行內屬性
備註：我們最常用的就是div+css布局了，而div就是乙個典型的塊屬性標籤，橫向布局的時候我們通常都是用div float實現的，橫向的間距設定如果用margin實現，這就是乙個必然會碰到的相容性問題。
瀏覽器相容問題三：設定較小高度標籤（一般小於10px），在ie6，ie7，遨遊中高度超出自己設定高度
問題症狀：ie6、7和遨遊裡這個標籤的高度不受控制，超出自己設定的高度
碰到頻率：60%
解決方案：給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。
備註：這種情況一般出現在我們設定小圓角背景的標籤裡。出現這個問題的原因是ie8之前的瀏覽器都會給標籤乙個最小預設的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到預設的行高。
瀏覽器相容問題四：行內屬性標籤，設定display:block後採用float布局，又有橫行的margin的情況，ie6間距bug
問題症狀：ie6裡的間距比超過設定的間距
碰到機率：20%
解決方案：在display:block;後面加入display:inline;display:table;
備註：行內屬性標籤，為了設定寬高，我們需要設定display:block;(除了input標籤比較特殊)。在用float布局並有橫向的margin後，在ie6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標籤，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。
瀏覽器相容問題五：預設有間距
問題症狀：幾個img標籤放在一起的時候，有些瀏覽器會有預設的間距，加了問題一中提到的萬用字元也不起作用。
碰到機率：20%
解決方案：使用float屬性為img布局
備註：因為img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行裡，但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（我的乙個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器相容問題的用法，所以我禁止他們使用）
瀏覽器相容問題六：標籤最低高度設定min-height不相容
問題症狀：因為min-height本身就是乙個不相容的css屬性，所以設定min-height時不能很好的被各個瀏覽器相容
碰到機率：5%
解決方案：如果我們要設定乙個標籤的最小高度200px，需要進行的設定為：
備註：在b/s系統前端開時，有很多情況下我們又這種需求。當內容小於乙個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個相容性問題。
瀏覽器相容問題七：透明度的相容css設定
做相容頁面的方法是：每寫一小段**（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否相容，當然熟練到一定的程度就沒這麼麻煩了。建議經常會碰到相容性問題的新手使用。很多相容性問題都是因為瀏覽器對標籤的預設屬性解析不同造成的，只要我們稍加設定都能輕鬆地解決這些相容問題。如果我們熟悉標籤的預設屬性的話，就能很好的理解為什麼會出現相容問題以及怎麼去解決這些相容問題。
/* css hack*/◆ie6認識的hacker 是下劃線_ 和星號 *
◆ie7 遨遊認識的hacker是星號 *
比如這樣乙個css設定：
height:300px;*height:200px;_height:100px;ie6瀏覽器在讀到height:300px的時候會認為高時300px；繼續往下讀，他也認識*heihgt， 所以當ie6讀到*height:200px的時候會覆蓋掉前一條的相衝突設定，認為高度是200px。繼續往下讀，ie6還認識_height,所以他又會覆蓋掉200px高的設定，把高度設定為100px；
ie7和遨遊也是一樣的從高度300px的設定往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度解析為200px，剩下的瀏覽器只認識第乙個height:300px;所以他們會把高度解析為300px。因為優先順序相同且想衝突的屬性設定後乙個會覆蓋掉前乙個，所以書寫的次序是很重要的。
常見瀏覽器相容性問題
概念 不同的瀏覽器對同一段 解析不同造成瀏覽器顯示效果不同，我們把這樣的問題叫做瀏覽器相容性問題 描述 塊元素float後，又設定了橫向的margin值，在ie6下顯示的margin值比設定的值要大，並且是2倍關係 解決方案 給float的塊元素新增display inline 解決方案 a 給表單...
常見的瀏覽器相容性問題總結
1.不同瀏覽器的標籤缺省外補丁margin和內補丁padding不同 發生概率 100 解決方案 使用css萬用字元 設定內外補丁為0 2.塊屬性標籤float之後，又有橫向的margin值，在ie6中顯示會比設定的大 ie6雙邊距bug 發生概率 90 解決方案 在float標籤樣式控制中加入di...
瀏覽器相容性問題總結
分為html css js三部分。html5shim 可以讓你的 ie9 或者更低版本的 ie 瀏覽器支援 html5。使用方法 判斷瀏覽器是否支援html5 window.onload function else script pc端 document.addeventlistener docum...