手牽手系列之處理瀏覽器相容常見問題

所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段**有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的**或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。

不同瀏覽器的核心也不盡相同，所以各個瀏覽器對網頁的解析存在一定的差異。瀏覽器核心主要分為兩種，一是渲染引擎，另乙個是js 引擎，核心更加傾向於說渲染引擎。常見的瀏覽器核心：

備註：不同瀏覽器的預設樣式存在差異，可以使用normalize.css抹平這些差異。

1.不同瀏覽器的標籤預設的外補丁和內補丁不同

問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率:100%

解決方案：css裡 *

備註：這個是最常見的也是最易解決的乙個瀏覽器相容性問題，幾乎所有的css檔案開頭都會用萬用字元*來設定各個標籤的內外補丁是0。

2.塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大

問題症狀:常見症狀是ie6中後面的一塊被頂到下一行

碰到頻率：90%（稍微複雜點的頁面都會碰到，float布局最常見的瀏覽器相容問題）

解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化為行內屬性

備註：我們最常用的就是div+css布局了，而div就是乙個典型的塊屬性標籤，橫向布局的時候我們通常都是用div float實現的，橫向的間距設定如果用margin實現，這就是乙個必然會碰到的相容性問題。