做前端，總會涉及到瀏覽器相容的問題，之所以存在瀏覽器相容的問題，是因為各個瀏覽器的核心不同，
相對應的同一套**，不同的瀏覽器解析後，所呈現的頁面效果也會存在一定的差異。
一 瀏覽器核心差異
先來了解一下各個瀏覽器的核心（渲染引擎）：
trident(ie核心)：
ie6、ie7、ie8（trident 4.0）、ie9（trident 5.0）、ie10（trident 6.0）
gecko(firefox核心)：
mozilla firefox
webkit(safari核心,chrome核心原型,開源)：
二 相容問題處理細則
1、瀏覽器缺省會有一些自己獨有的屬性，像內外邊距啦，邊框啊、input自帶的樣式啊等等，比如
清除補丁和邊距：*，像這樣使用萬用字元強制將補丁和邊距置為零，簡單粗暴，
但是這樣處理比較消耗效能，我一般傾向於使用一些css樣式重置庫，
neat.css：解決bug，特別是低階瀏覽器的常見bug；統一效果，但不盲目追求重置為0；向後相容；
考慮響應式；考慮移動裝置。
reset.css：對瀏覽器樣式的重置（殺傷力偏大）
normalize.css：修復瀏覽器樣式
2、塊級元素浮動後，又使用margin來控制相鄰塊級元素的間距的情況下，在ie6下，margin值要比我們
設定的值大，這樣，後面浮動的元素就會被擠到下面去，解決方案是：將浮動的塊級元素的display屬性值
設為inline-block。
3、設定標籤的高度小於10px的時候，在ie6，ie7，遨遊中標籤的高度會超出自己設定高度。解決方案：
給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。
3、設定標籤的高度小於10px的時候，在ie6，ie7，遨遊中標籤的高度會超出自己設定高度。解決方案：
給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。
4、行內屬性標籤，設定display:block後採用float布局，又有橫行的margin的情況，ie6間距bug。
解決方案：在display:block;後面加入display:inline;display:table;。
5、幾個img標籤放在一起的時候，有些瀏覽器會有預設的間距。解決方案：使用float屬性為img布局。
6、min-height設定標籤最小高度的時候不相容。解決方案：如果我們要設定乙個標籤的最小高度200px，
需要進行的設定為：
條件注釋法：
除ie外都可識別
.csshack
.csshack, x:-moz-any-link, x:default/*ie7 firefox3.5及以下 識別 */
@-moz-document url-prefix()}/* 僅firefox 識別 */
* +html .csshack/* 僅ie7 識別 */
@media screen and (-webkit-min-device-pixel-ratio:0)}{}
/*safari(chrome) 有效 */
@media all and (min-width: 0px)
}
不同瀏覽器的核心也不盡相同，所以各個瀏覽器對網頁的解析存在一定的差異。
瀏覽器核心主要分為兩種，一是渲染引擎，另乙個是js 引擎，核心更加傾向於說渲染引擎。
常見的瀏覽器核心可以分四種：trident、gecko、blink、webkit
1.ie瀏覽器 trident核心，也成為ie核心
2.chrome瀏覽器 webkit核心，現在是blink核心
3.firefox瀏覽器 gecko核心，俗稱firefox核心
4.safari瀏覽器 webkit核心
5.opera瀏覽器 最初是自己的presto核心，後來加入谷歌大軍，從webkit又到了blink核心；
6.360瀏覽器 ie+chrome雙核心
7.獵豹瀏覽器 ie+chrome雙核心
9.qq瀏覽器 trident（相容模式）+webkit（高速模式）
常見的相容性問題：
1、不同瀏覽器的標籤預設的外補丁( margin )和內補丁(padding)不同
解決方案： css 裡增加萬用字元 *
2、ie6雙邊距問題；在 ie6中設定了float , 同時又設定margin , 就會出現邊距問題
解決方案：設定display:inline;
3、當標籤的高度設定小於10px，在ie6、ie7中會超出自己設定的高度
解決方案：超出高度的標籤設定overflow:hidden,或者設定line-height的值小於你的設定高度
4、預設有間距
解決方案：使用float 為img 布局
5、ie9一下瀏覽器不能使用opacity
解決方案：
opacity: 0.5;filter:
alpha(opacity = 50);filter: progid:dximagetransform.microsoft.alpha
(style = 0, opacity = 50);
6、邊距重疊問題；當相鄰兩個元素都設定了margin 邊距時，margin 將取最大值，捨棄最小值；
解決方案：為了不讓邊重疊，可以給子元素增加乙個父級元素，並設定父級元素為overflow:hidden；
7、cursor:hand 顯示手型在safari 上不支援
解決方案：統一使用 cursor:pointer
8、兩個塊級元素，父元素設定了overflow:auto；子元素設定了position:relative ;
且高度大於父元素，在ie6、ie7會被隱藏而不是溢位；
解決方案：父級元素設定position:relative
前端知識點整理目錄
瀏覽器渲染機制 三次握手四次揮手 http狀態碼 http隊頭阻塞 基本文件規範 h5新標籤 彈性布局 flex 盒模型 box sizing 形變 translate 水平垂直居中 定位布局 原型與原型鏈 工廠模式 建構函式模式 原型模式 事件迴圈機制eventloop 節流防抖 js深淺拷貝 閉...
前端知識點整理（二）
1.html怎麼解析的？把html解析為dom樹，使用css渲染dom，js操作dom。2.window中的onload和jq中的ready有什麼區別？a window中的onload是在頁面中的包括的所有元素載入玩之後才會執行，jq中的 document ready 是dom載入完之後就可以執行，...
知識點整理
一 標準庫容器和演算法 1.順序容器 與前面類似 2.關聯容器 map和multimap 元素包含key 鍵 和值 value 兩部分 按照鍵對元素排序 map不允許重複元素出現，但multimap可以 set和multliset 是包含已排序物件的關聯容器 只是單純的鍵的集合 set不允許重複鍵出...