当我们编写了一个网页，也就是常说的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 教程。
