前端中常見的兼容性問題有哪些？如何解決？

當(dāng)我們編寫了一個(gè)網(wǎng)頁，也就是常說的HTML文件，我們需要進(jìn)行運(yùn)行讓它以網(wǎng)頁形式展現(xiàn)出來。瀏覽器的不同可能會導(dǎo)致運(yùn)行效果的不同，這就屬于兼容性問題。這篇文章 W3Cschool 小編來為大家解答一下前端中常見的兼容性問題有哪些？如何解決？

瀏覽器兼容性

兼容性問題的出現(xiàn)，是因?yàn)闉g覽器內(nèi)核的不同，導(dǎo)致的解析差異。我們常見的瀏覽器內(nèi)核主要有兩種，分別是渲染引擎和js引擎。

最常見的瀏覽器內(nèi)核有四種：Trident，Gecko、Blink、Webkit

常見的兼容性問題：

•  不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁( margin )和內(nèi)補(bǔ)丁(padding)不同。在不加樣式的情況下，margin 和 padding 差異較大。這是最常見的瀏覽器兼容性問題，但也是最好解決的一個(gè)。

如何解決： css 里增加通配符 ?* { margin: 0; padding: 0; }?

•  塊屬性標(biāo)簽設(shè)置了 float , 同時(shí)又設(shè)置 margin , 在 IE6 運(yùn)行中，后面那一塊會被頂?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)幾個(gè) img 標(biāo)簽放在一起的時(shí)候，有的瀏覽器會有默認(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 與文字放在一起時(shí)，line-height 不起作用。

  如何解決：兩者都設(shè)置為 ?float?。

•  邊距重疊問題；當(dāng)相鄰兩個(gè)元素都設(shè)置了 margin 邊距時(shí)，margin 將取最大值，舍棄最小值；

 如何解決：為了不讓邊重疊，可以給子元素增加一個(gè)父級元素，并將父級元素設(shè)置為?overflow:hidden?；

•  cursor:hand 顯示手型在 safari 上不支持。

 如何解決：統(tǒng)一使用 ?cursor:pointer?。

•  兩個(gè)塊級元素，父元素設(shè)置了overflow:auto；子元素設(shè)置了position:relative ; 且高度大于父元素，在 IE7 以下版本瀏覽器會被隱藏而不是溢出。

 如何解決：父級元素設(shè)置 ?position:relative?。

以上就是小編整理的常見的前端兼容性問題，以及兼容性問題的解決方案。更多前端的兼容性問題解決請學(xué)習(xí) HTML 教程。