對於乙個前端人員來說,最痛苦的莫過於要求自己的作品在各個瀏覽器中顯示都一致了,但是,從另外乙個層面來說,這也是最幸福的事兒,因為在相容性的除錯過程中,可以加深我們對技術的理解和應用.
一般的開發人員可以分為兩類,第一類人,他們對自己的要求很嚴格,每次切完圖後,會用用ps進行對比，力求和設計稿相差2px以內，而另外一類人則沒有這麼要求自己，他們就憑藉著自己的肉眼，看個大概就ok了，如果沒有一雙畫素眼的話，往往會導致相差好幾個畫素。就我個人而言，我比較推崇第一種開發方式，因為這樣可以給後期的維護帶來很大的方便！
如果要求自己的作品只有2px的差別，那麼瀏覽器相容性問題將是乙個困擾開發人員的大問題了，特別是ie的各個版本，從6一直到11，每乙個版本都會給你帶來不一樣的「驚喜」。廢話不多說，進入主題吧！
為了便於大家的理解，我將按照以下幾個步驟帶領大家認識瀏覽器相容性除錯
第一步 準備乙個測試的神器
為了方便開發和測試，有乙個好的工具很重要，很多人用ietester ，就我個人而言，我太喜歡，因為覺得功能不夠強大，除錯起來不夠方便。我強力推薦大家安裝乙個虛擬機器visualbox，這樣除錯起來比較方便。
第二步 認識css hack
不同的瀏覽器對css的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的css，讓它能夠同時相容不同的瀏覽器。
css hack 有以下三種實現方式
rel="stylesheet"
type="text/css"
href="css.css" />
rel="stylesheet"
type="text/css"
href="ie7.css" />
rel="stylesheet"
type="text/css"
href="ie.css" />
語法講解
lte：就是less than or equal to的簡寫，也就是小於或等於的意思。
lt ：就是less than的簡寫，也就是小於的意思。
gte：就是greater than or equal to的簡寫，也就是大於或等於的意思。
gt ：就是greater than的簡寫，也就是大於的意思。
! ：就是不等於的意思
.bg
/*乙個用於展示的class為bb的div標籤*/
/*被所有瀏覽器識別.*/
-html
#demo
/*會被ie6識別,之前的定義會被後來的覆蓋,所以#demo的寬度在ie6就為120px; */
*+html
#demo
/*會被ie7識別*/
/*乙個用於展示的class為bb的div標籤*/
第三步 常見相容性問題1 不同瀏覽器的標籤預設的margin 和 padding 屬性值不同
解決方案： `* `
2 不同瀏覽器的預設字型不同
解決方案： `body `
3 margin加倍問題
問題說明：在ie6中設定為float的div的margin 會加倍計算
解決方案：給這個div的css加上display:inline
id=」demo」>
#demo
4 div浮動ie6文字產生3象素的bug
問題說明：左邊物件浮動，右邊物件內的文字會離左邊有3px的間距
解決方案：
#demo
id="demo">大公尺div>3px問題span>5 ie6下為什麼下有空隙產生
問題說明：如下**在ie6下執行時會出現4px左右的空隙
padding:10px 30px;
}#sub
id="sub">
div>
解決方案1：設定img為「display:block;#sub img
瀏覽器相容性
瀏覽器相容性是乙個很長久的話題，之所以前端需要面對瀏覽器相容性，是因為使用者的環境有不同的平台，不同的瀏覽器。不同的廠商之間為了相互競爭，對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本，不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...
瀏覽器相容性
所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段 有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前，我...
瀏覽器相容性
trident ie核心 gecko firefox 核心 webkit chrome，safari blink webkit 的分支 presto 是挪威產瀏覽器 opera 的 前任 核心，為何說是 前任 因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。移動端的瀏覽器核心主要說...