web前端中常见的兼容性问题有哪些及怎么解决
这篇"web前端中常见的兼容性问题有哪些及怎么解决"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"web前端中常见的兼容性问题有哪些及怎么解决"文章吧。
浏览器兼容性
兼容性问题的出现，是因为浏览器内核的不同，导致的解析差异。我们常见的浏览器内核主要有两种，分别是渲染引擎和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。
以上就是关于"web前端中常见的兼容性问题有哪些及怎么解决"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。
