市場上瀏覽器種類很多，不同瀏覽器的核心也不盡相同，所以各個瀏覽器對網頁的解析存在一定的差異。
瀏覽器核心主要分為兩種，一是渲染引擎，另乙個是js 引擎，核心更加傾向於說渲染引擎。
常見的瀏覽器核心：
常見的瀏覽器核心可以分四種：trident、gecko、blink、webkit
ie瀏覽器
trident核心，也成為ie核心
chrome瀏覽器
webkit核心，現在是blink核心
firefox瀏覽器
gecko核心，俗稱firefox核心
safari瀏覽器
webkit核心
opera瀏覽器
最初是自己的presto核心，後來加入谷歌大軍，從webkit又到了blink核心；
360瀏覽器
ie+chrome雙核心
獵豹瀏覽器
ie+chrome雙核心
ie核心
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
前端瀏覽器相容性問題
在前端開發的過程中我們不可避免的會遇到瀏覽器相容性問題，這也是我們必須要解決的問題。首先來了解一下為什麼存在瀏覽器相容性問題。現在的市場上有很多種類的瀏覽器，不同種類的瀏覽器的核心也不盡相同，所以不同瀏覽器對 的解析會存在差異，這就導致對頁面渲染效果不統一的問題。市場上常見的瀏覽器核心主要有四種 w...
常見瀏覽器相容性問題
概念 不同的瀏覽器對同一段 解析不同造成瀏覽器顯示效果不同，我們把這樣的問題叫做瀏覽器相容性問題 描述 塊元素float後，又設定了橫向的margin值，在ie6下顯示的margin值比設定的值要大，並且是2倍關係 解決方案 給float的塊元素新增display inline 解決方案 a 給表單...
常見的瀏覽器相容性問題
1.就是ie6雙倍邊距的問題，在使用了float的情況下，不管是向左還是向右都會出現雙倍，最簡單的解決方法就是用display inline 加到 css裡面去。2.文字本身的大小不相容。同樣是font size 14px的宋體文字，在不同瀏覽器下佔的空間是不一樣的，ie下實際佔高16px，下留白3...