web前端中常見的兼容性問題有哪些及怎么解決

這篇“web前端中常見的兼容性問題有哪些及怎么解決”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“web前端中常見的兼容性問題有哪些及怎么解決”文章吧。

瀏覽器兼容性

兼容性問題的出現，是因為瀏覽器內核的不同，導致的解析差異。我們常見的瀏覽器內核主要有兩種，分別是渲染引擎和js引擎。

最常見的瀏覽器內核有四種：Trident，Gecko、Blink、Webkit

常見的兼容性問題：

•  不同瀏覽器的標簽默認的外補丁( margin )和內補丁(padding)不同。在不加樣式的情況下，margin 和 padding 差異較大。這是最常見的瀏覽器兼容性問題，但也是最好解決的一個。

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

•  塊屬性標簽設置了 float , 同時又設置 margin , 在 IE6 運行中，后面那一塊會被頂到下一行。

如何解決：在 float 樣式標簽中加入 display:inline 將其轉化為行內屬性。

•  當標簽的高度設置小于 10px，在 IE6、IE7 中會超出自己設置的高度。

 如何解決：給超出高度的標簽設置 overflow：hidden，或者設定 line-height 的值小于你設置的高度。

•  圖片默認有間距。當幾個 img 標簽放在一起的時候，有的瀏覽器會有默認間距，即使加了通配符也不起任何作用。

 如何解決：使用 float 為 img 布局

•  td 自動換行問題。table 寬度固定，td 會自動換行。

  如何解決：設置 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 不起作用。

  如何解決：兩者都設置為 float。

•  邊距重疊問題；當相鄰兩個元素都設置了 margin 邊距時，margin 將取最大值，舍棄最小值；

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

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

 如何解決：統一使用 cursor:pointer。

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

 如何解決：父級元素設置 position:relative。

以上就是關于“web前端中常見的兼容性問題有哪些及怎么解決”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。