web前端關于浏覽器兼容性問題?市場上浏覽器種類很多，不同浏覽器的内核也不盡相同，所以各個浏覽器對網頁的解析存在一定的差異，我來為大家科普一下關于web前端關于浏覽器兼容性問題?下面希望有你要的答案，我們一起來看看吧!

web前端關于浏覽器兼容性問題

市場上浏覽器種類很多，不同浏覽器的内核也不盡相同，所以各個浏覽器對網頁的解析存在一定的差異。

浏覽器内核主要分為兩種，一是渲染引擎，另一個是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 裡增加通配符 * { margin: 0; padding: 0; }

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!