當(dāng)我們編寫了一個網(wǎng)頁，也就是常說的HTML文件，我們需要進(jìn)行運行讓它以網(wǎng)頁形式展現(xiàn)出來。瀏覽器的不同可能會導(dǎo)致運行效果的不同，這就屬于兼容性問題。這篇文章 W3Cschool 小編來為大家解答一下前端中常見的兼容性問題有哪些？如何解決？
瀏覽器兼容性
兼容性問題的出現(xiàn)，是因為瀏覽器內(nèi)核的不同，導(dǎo)致的解析差異。我們常見的瀏覽器內(nèi)核主要有兩種，分別是渲染引擎和js引擎。
最常見的瀏覽器內(nèi)核有四種：Trident，Gecko、Blink、Webkit
| IE 瀏覽器 | Trident 內(nèi)核 |
| Chrome 瀏覽器 | Webkit 內(nèi)核，現(xiàn)在是 Blink 內(nèi)核 |
| Firefox 瀏覽器 | Gecko 內(nèi)核，俗稱 Firefox 內(nèi)核 |
| safair 瀏覽器 | Webkit 內(nèi)核 |
| Opera 瀏覽器 | 現(xiàn)在是 Blink 內(nèi)核 |
| 360 瀏覽器 | IE+Chrome 雙內(nèi)核 |
| 獵豹瀏覽器 | IE+Chrome 雙內(nèi)核 |
| 百度瀏覽器 | IE 內(nèi)核 |
| QQ 瀏覽器 | Trident（兼容模式）+Webkit（高速模式） |
常見的兼容性問題：
- 不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補丁( margin )和內(nèi)補丁(padding)不同。在不加樣式的情況下，margin 和 padding 差異較大。這是最常見的瀏覽器兼容性問題，但也是最好解決的一個。
如何解決： css 里增加通配符 ?* { margin: 0; padding: 0; }?
- 塊屬性標(biāo)簽設(shè)置了 float , 同時又設(shè)置 margin , 在 IE6 運行中，后面那一塊會被頂?shù)较乱恍小?/li>
如何解決：在 float 樣式標(biāo)簽中加入 ?display:inline? 將其轉(zhuǎn)化為行內(nèi)屬性。
- 當(dāng)標(biāo)簽的高度設(shè)置小于 10px，在 IE6、IE7 中會超出自己設(shè)置的高度。
如何解決：給超出高度的標(biāo)簽設(shè)置 ?overflow：hidden?，或者設(shè)定 line-height 的值小于你設(shè)置的高度。
- 圖片默認(rèn)有間距。當(dāng)幾個 img 標(biāo)簽放在一起的時候，有的瀏覽器會有默認(rèn)間距，即使加了通配符也不起任何作用。
如何解決：使用 float 為 ?img ?布局
- td 自動換行問題。table 寬度固定，td 會自動換行。
如何解決：設(shè)置 table 樣式為? table-layout：fixed，td為word-wrap：break-word?。
- IE9一下瀏覽器不能使用 opacity
如何解決：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
- IE7以下版本 line-height 失效。在IE瀏覽器中，img 與文字放在一起時，line-height 不起作用。
如何解決：兩者都設(shè)置為 ?float?。
- 邊距重疊問題；當(dāng)相鄰兩個元素都設(shè)置了 margin 邊距時，margin 將取最大值，舍棄最小值；
如何解決：為了不讓邊重疊，可以給子元素增加一個父級元素，并將父級元素設(shè)置為?overflow:hidden?；
- cursor:hand 顯示手型在 safari 上不支持。
如何解決：統(tǒng)一使用 ?cursor:pointer?。
- 兩個塊級元素，父元素設(shè)置了overflow:auto；子元素設(shè)置了position:relative ; 且高度大于父元素，在 IE7 以下版本瀏覽器會被隱藏而不是溢出。
如何解決：父級元素設(shè)置 ?position:relative?。
以上就是小編整理的常見的前端兼容性問題，以及兼容性問題的解決方案。更多前端的兼容性問題解決請學(xué)習(xí) HTML 教程。
