所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段**有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的**或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。
在學習瀏覽器相容性之前，我想把前端開發人員劃分為兩類：
第一類是精確按照設計圖開發的前端開發人員，可以說是精確到１ｐｘ的，他們很容易就會發現設計圖的不足，並且在很少的情況下會碰到瀏覽器的相容性問題，而這些問題往往都死瀏覽器的ｂｕｇ，並且他們製作的頁面後期易維護，**重用問題少，可以說是比較牢固放心的**。
第二類是基本按照設計圖來開發的前端開發人員，很多細枝末節差距很大，不如間距，行高，**位置等等經常會差幾ｐｘ。某種效果的實現也是反覆除錯得到，具體為什麼出現這種效果還模模糊糊，整體布局十分脆弱。稍有改動就亂七八糟。
**為什麼這麼寫還不知所以然。這類開發人員往往經常為相容性問題所困。修改好了這個瀏覽器又亂了另乙個瀏覽器。
改來改去也毫無頭緒。其實他們碰到的相容性問題大部分不應該歸咎於瀏覽器，而是他們的技術本身了。
我這篇文章主要針對的是第一類，嚴謹型的開發人員，因此這裡主要從瀏覽器解析差異的角度來分析相容性問題。（第二類開發人員寫得**怪毛病多多，自己寫的都看不懂，怎麼能祈望瀏覽器看懂。請多練習基本的等ｃｓｓ屬性的使用。
）瀏覽器相容問題一：不同瀏覽器的標籤預設的外補丁和內補丁不同問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的ｍａｒｇｉｎ 和ｐａｄｄｉｎｇ差異較大。
碰到頻率解決方案：ｃｓｓ裡備註：這個是最常見的也是最易解決的乙個瀏覽器相容性問題，幾乎所有的ｃｓｓ檔案開頭都會用萬用字元＊來設定各個標籤的內外補丁是０。
瀏覽器相容問題二：塊屬性標籤ｆｌｏａｔ後，又有橫行的ｍａｒｇｉｎ情況下，在ｉｅ６顯示ｍａｒｇｉｎ比設定的大問題症狀：常見症狀是ｉｅ６中後面的一塊被頂到下一行碰到頻率：
９０％（稍微複雜點的頁面都會碰到，ｆｌｏａｔ布局最常見的瀏覽器相容問題）解決方案：在ｆｌｏａｔ的標籤樣式控制中加入將其轉化為行內屬性備註：我們最常用的就是ｄｉｖ＋ｃｓｓ布局了，而ｄｉｖ就是乙個典型的塊屬性標籤，橫向布局的時候我們通常都是用ｄｉｖ ｆｌｏａｔ實現的，橫向的間距設定如果用ｍａｒｇｉｎ實現，這就是乙個必然會碰到的相容性問題。
瀏覽器相容問題三：設定較小高度標籤（一般小於１０ｐｘ），在ｉｅ６，ｉｅ７，遨遊中高度超出自己設定高度問題症狀：ｉｅ６、７和遨遊裡這個標籤的高度不受控制，超出自己設定的高度碰到頻率：
解決方案：給超出高度的標籤設定或者設定行高小於你設定的高度。
備註：這種情況一般出現在我們設定小圓角背景的標籤裡。出現這個問題的原因是ｉｅ８之前的瀏覽器都會給標籤乙個最小預設的行高的高度。
即使你的標籤是空的，這個標籤的高度還是會達到預設的行高。
瀏覽器相容問題四：行內屬性標籤，設定後採用ｆｌｏａｔ布局，又有橫行的ｍａｒｇｉｎ的情況，ｉｅ６間距ｂｕｇ（類似第二種）問題症狀：ｉｅ６裡的間距比超過設定的間距碰到機率：
解決方案：在後面加入備註：行內屬性標籤，為了設定寬高，我們需要設定除了ｉｎｐｕｔ標籤比較特殊）。
在用ｆｌｏａｔ布局並有橫向的ｍａｒｇｉｎ後，在ｉｅ６下，他就具有了塊屬性ｆｌｏａｔ後的橫向ｍａｒｇｉｎ的ｂｕｇ。不過因為它本身就是行內屬性標籤，所以我們再加上的話，它的高寬就不可設了。這時候我們還需要在後面加入
瀏覽器相容問題五：**預設有間距問題症狀：幾個ｉｍｇ標籤放在一起的時候，有些瀏覽器會有預設的間距，加了問題一中提到的萬用字元也不起作用。
碰到機率：
解決方案：使用ｆｌｏａｔ屬性為ｉｍｇ布局備註：因為ｉｍｇ標籤是行內屬性標籤，所以只要不超出容器寬度，ｉｍｇ標籤都會排在一行裡，但是部分瀏覽器的ｉｍｇ標籤之間會有個間距。
去掉這個間距使用ｆｌｏａｔ是正道。（我的乙個學生使用負ｍａｒｇｉｎ，雖然能解決，但負ｍａｒｇｉｎ本身就是容易引起瀏覽器相容問題的用法，所以我禁止他們使用）瀏覽器相容問題六：標籤最低高度設定不相容問題症狀：
因為本身就是乙個不相容的ｃｓｓ屬性，所以設定時不能很好的被各個瀏覽器相容碰到機率：
解決方案：如果我們要設定乙個標籤的最小高度２００ｐｘ，需要進行的設定為：
備註：在ｂ／ｓ系統前端開時，有很多情況下我們又這種需求。當內容小於乙個值（如３００ｐｘ）時。
容器的高度為３００ｐｘ；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個相容性問題。
瀏覽器相容問題七：透明度的相容ｃｓｓ設定備註：這個問題我在前面的文章提到過，講的比較詳細做相容頁面的方法是：
每寫一小段**（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否相容，當然熟練到一定的程度就沒這麼麻煩了。建議經常會碰到相容性問題的新手使用。很多相容性問題都是因為瀏覽器對標籤的預設屬性解析不同造成的，只要我們稍加設定都能輕鬆地解決這些相容問題。
如果我們熟悉標籤的預設屬性的話，就能很好的理解為什麼會出現相容問題以及怎麼去解決這些相容問題我很少使用ｈａｃｋｅｒ的，可能是個人習慣吧，我不喜歡寫的**ｉｅ不相容，然後用ｈａｃｋ來解決。不過ｈａｃｋｅｒ還是非常好用的。
使用ｈａｃｋｅｒ 我可以吧瀏覽器分為３類：ｉｅ６ ；ｉｅ７和遨遊；其他等）認識的ｈａｃｋｅｒ 是下劃線＿ 和星號遨遊認識的ｈａｃｋｅｒ是星號 ＊ （包括上面問題６中的也算是ｈａｃｋ的一種。不過實用性較小。
）比如這樣乙個ｃｓｓ設定瀏覽器在讀到的時候會認為高時３００ｐｘ；繼續往下讀，他也認識＊ｈｅｉｈｇｔ， 所以當ｉｅ６讀到的時候會覆蓋掉前一條的相衝突設定，認為高度是２００ｐｘ。繼續往下讀，ｉｅ６還認識＿ｈｅｉｇｈｔ，所以他又會覆蓋掉２００ｐｘ高的設定，把高度設定為１００ｐｘ；和遨遊也是一樣的從高度３００ｐｘ的設定往下讀。當它們讀到的時候就停下了，因為它們不認識＿ｈｅｉｇｈｔ。
所以它們會把高度解析為２００ｐｘ；剩下的瀏覽器只認識第乙個所以他們會把高度解析為３００ｐｘ。
因為優先順序相同且想衝突的屬性設定後乙個會覆蓋掉前乙個，所以書寫的次序是很重要的。
瀏覽器相容性解決辦法
div css解決ie6，ie7，ie8，ff相容問題 下相容問題，這個最好處理，轉化成ie7相容就可以。在頭部加如下一段 然後只要在ie7下相容了，ie8下面也就相容了 浮動造成ie6下面雙倍邊距問題，這個最常見，也最好處理，important解決，比如 margin left 10px impo...
常見瀏覽器相容性問題與解決方案
所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段 有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前，我...
CSS多瀏覽器相容性問題及解決方案
相容性處理要點 1 doctype 影響 css 處理 2 ff 設定 padding 後，div 會增加 height 和 width，但 ie 不會，故需要用 important 多設乙個 height 和 width 3 ff 支援 important，ie 則忽略，可用 important ...