市場上瀏覽器種類很多，不同瀏覽器的內(nèi)核也不盡相同，所以各個瀏覽器對網(wǎng)頁的解析存在一定的差異。

瀏覽器內(nèi)核主要分為兩種，一是渲染引擎，另一個是js 引擎，內(nèi)核更加傾向于說渲染引擎。

常見的瀏覽器內(nèi)核：

常見的瀏覽器內(nèi)核可以分四種：Trident、Gecko、Blink、Webkit

常見的兼容性問題：

1、不同瀏覽器的標簽默認的外補丁( margin )和內(nèi)補丁(padding)不同

解決方案： css 里增加通配符 * { margin: 0; padding: 0; }

2、IE6雙邊距問題；在 IE6中設置了float , 同時又設置margin , 就會出現(xiàn)邊距問題

解決方案：設置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 上不支持

解決方案：統(tǒng)一使用 cursor:pointer

8、兩個塊級元素，父元素設置了overflow:auto；子元素設置了position:relative ;且高度大于父元素，在IE6、IE7會被隱藏而不是溢出；

解決方案：父級元素設置position:relative

最后

“相信有很多想學前端的小伙伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端干貨，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小伙伴，47259，

4723這里是小白聚集地，歡迎初學和進階中的小伙伴。”