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前端中常见的兼容性问题有哪些及怎么解决”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。