做前端，總會涉及到瀏覽器兼容的問題，之所以存在瀏覽器兼容的問題，是因為各個瀏覽器的內核不同， 相對應的同一套代碼，不同的瀏覽器解析后，所呈現的頁面效果也會存在一定的差異。一 瀏覽器內核差異 先來了解一下各個瀏覽器的內核（渲染引擎）：Trident(IE內核)： IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）Gecko(Firefox內核)： Mozilla FirefoxWebkit(Safari內核,Chrome內核原型,開源)：二 兼容問題處理細則 1、瀏覽器默認會有一些自己獨有的屬性，像內外邊距啦，圖片邊框啊、input自帶的樣式啊等等，比如 清除補丁和邊距：*{margin:0;padding:0;}，像這樣使用通配符強制將補丁和邊距置為零，簡單粗暴， 但是這樣處理比較消耗性能，我一般傾向于使用一些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， 需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}條件注釋法：<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]--><!--[if IE]> 所有的IE可識別 <![endif]--><!--[if IE 6]> 僅IE6可識別 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]--><!--[if IE 7]> 僅IE7可識別 <![endif]--><!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]--><!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]--><!--[if IE 8]> 僅IE8可識別 <![endif]--><!--[if IE 9]> 僅IE9可識別 <![endif]-->.csshack {width: 100px;height: 100px;background-color: green;/* 全部識別 */.background-color: #ccc\9;/*IE6、7、8識別*/+background-color: #fff;/*IE6、7識別*/_background-color:#1e0bd1;/*IE6識別*/ } .csshack, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 識別 */ @-moz-document url-prefix(){.csshack{background-color:#00ff00;}}/* 僅firefox 識別 */ * +html .csshack{background-color:#a200ff;}/* 僅IE7 識別 */ @media screen and (-webkit-min-device-pixel-ratio:0){.csshack{background-color:#f1ee18}}{}/*safari(Chrome) 有效 */ @media all and (min-width: 0px){ .csshack{background-color:#f1ee18; /*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;/* 僅 Opera 有效 */ }}

前端常見的瀏覽器兼容性問題及解決方案

不同瀏覽器的內核也不盡相同，所以各個瀏覽器對網頁的解析存在一定的差異。瀏覽器內核主要分為兩種，一是渲染引擎，另一個是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雙內核 8.百度瀏覽器 IE內核 9.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:pointer8、兩個塊級元素，父元素設置了overflow:auto；子元素設置了position:relative ; 且高度大于父元素，在IE6、IE7會被隱藏而不是溢出； 解決方案：父級元素設置position:relative

?

?

?

總結

以上是生活随笔為你收集整理的前端浏览器兼容知识点整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。