当我们编写了一个网页，也就是常说的HTML文件，我们需要进行运行让它以网页形式展现出来。浏览器的不同可能会导致运行效果的不同，这就属于兼容性问题。这篇文章 W3Cschool 小编来为大家解答一下前端中常见的兼容性问题有哪些？如何解决？

浏览器兼容性

兼容性问题的出现，是因为浏览器内核的不同，导致的解析差异。我们常见的浏览器内核主要有两种，分别是渲染引擎和js引擎。

最常见的浏览器内核有四种：Trident，Gecko、Blink、Webkit

IE 浏览器	Trident 内核
Chrome 浏览器	Webkit 内核，现在是 Blink 内核
Firefox 浏览器	Gecko 内核，俗称 Firefox 内核
safair 浏览器	Webkit 内核
Opera 浏览器	现在是 Blink 内核
360 浏览器	IE+Chrome 双内核
猎豹浏览器	IE+Chrome 双内核
百度浏览器	IE 内核
QQ 浏览器	Trident（兼容模式）+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​。

以上就是小编整理的常见的前端兼容性问题，以及兼容性问题的解决方案。更多前端的兼容性问题解决请学习 HTML 教程。