所谓的赏识器兼容性题目，是指由于差异的赏识器对统一段代码有差异的理会，造成页面表现结果不同一的环境。在大大都环境下，我们的需求是，无论用户用什么赏识器来查察我们的网站可能登岸我们的体系，都应该是同一的表现结果。以是赏识器的兼容性题目是前端开拓职员常常会遇到和必必要办理的题目。

51CTO保举阅读：完全免费 跨赏识器兼容测试8大利器

在进修赏识器兼容性之前，我想把前端开拓职员分别为两类：

第一类是准确凭证计划图开拓的前端开拓职员，可以说是准确到1px的，他们很轻易就会发明计划图的不敷，而且在很少的环境下会遇到赏识器的兼容性题目，而这些题目每每都死赏识器的bug，而且他们建造的页面后期易维护，代码重用题目少，可以说是较量平稳安心的代码。

第二类是根基凭证计划图来开拓的前端开拓职员，许多细枝小节差距很大，不如间距，行高，图片位置等等常常会差几px。某种结果的实现也是重复调试获得，详细为什么呈现这种结果还模恍惚糊，整体机关异常懦弱。稍有窜改就参差不齐。代码为什么这么写还不知以是然。这类开拓职员每每常常为兼容性题目所困。修改好了这个赏识器又乱了另一个赏识器。改来改去也毫无头绪。着实他们遇到的兼容性题目大部门不该该归罪于赏识器，而是他们的技能自己了。

文章首要针对的是第一类，严谨型的开拓职员，因此这里首要从赏识器理会差此外角度来说明兼容性题目。（相干文章保举：主流赏识器CSS 3和HTML 5兼容清单）

赏识器兼容题目一：差异赏识器的标签默认的外补丁和内补丁差异

题目症状：任意写几个标签，不加样式节制的环境下，各自的margin 和padding差别较大。

遇到频率:100%

办理方案：CSS里    *{margin:0;padding:0;}

备注：这个是最常见的也是最易办理的一个赏识器兼容性题目，险些全部的CSS文件开头城市用通配符*来配置各个标签的表里补丁是0。

赏识器兼容题目二：块属性标签float后，又有横行的margin环境下，在IE6表现margin比配置的大

题目症状:常见症状是IE6中后头的一块被顶到下一行

遇到频率：90%（轻微伟大点的页面城市遇到，float机关最常见的赏识器兼容题目）

办理方案：在float的标签样式节制中插手 display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS机关了，而div就是一个典范的块属性标签，横向机关的时辰我们凡是都是用div float实现的，横向的间距配置假如用margin实现，这就是一个肯定会遇到的兼容性题目。

赏识器兼容题目三：配置较小高度标签（一样平常小于10px），在IE6，IE7，飞舞中高度超出本身配置高度

题目症状：IE6、7和飞舞里这个标签的高度不受节制，超出本身配置的高度

遇到频率：60%

办理方案：给超出高度的标签配置overflow:hidden;可能配置行高line-height 小于你配置的高度。

备注：这种环境一样平常呈此刻我们配置小圆角配景的标签里。呈现这个题目的缘故起因是IE8之前的赏识器城市给标签一个最小默认的行高的高度。纵然你的标签是空的，这个标签的高度照旧会到达默认的行高。

赏识器兼容题目四：行内属性标签，配置display:block后回收float机关，又有横行的margin的环境，IE6间距bug

题目症状：IE6里的间距比高出配置的间距

遇到几率：20%

办理方案：在display:block;后头插手display:inline;display:table;

备注：行内属性标签，为了配置宽高，我们必要配置display:block;(除了input标签较量非凡)。在用float机关并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不外由于它自己就是行内属性标签，以是我们再加上display:inline的话，它的高宽就不行设了。这时辰我们还必要在display:inline后头插手display:talbe。

赏识器兼容题目五：图片默认有间距

题目症状：几个img标签放在一路的时辰，有些赏识器会有默认的间距，加了题目一中提到的通配符也不起浸染。

遇到几率：20%

办理方案：行使float属性为img机关

备注：由于img标签是行内属性标签，以是只要不超出容器宽度，img标签城市排在一行里，可是部门赏识器的img标签之间会有个间距。去掉这个间距行使float是正道。（我的一个门生行使负margin，固然能办理，但负margin自己就是轻易引起赏识器兼容题目的用法，以是我榨取他们行使）

赏识器兼容题目六：标签最低高度配置min-height不兼容

题目症状：由于min-height自己就是一个不兼容的CSS属性，以是配置min-height时不能很好的被各个赏识器兼容

遇到几率：5%

办理方案：假如我们要配置一个标签的最小高度200px，必要举办的配置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：在B/S体系前端开时，有许多环境下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是呈现转动条。这时辰我们就谋面对这个兼容性题目。

赏识器兼容题目七：透明度的兼容CSS配置

做兼容页面的要领是：每写一小段代码（机关中的一行可能一块）我们都要在差异的赏识器中看是否兼容，虽然纯熟到必然的水平就没这么贫困了。提议常常会遇到兼容性题目的新手行使。许多兼容性题目都是由于赏识器对标签的默认属性理会差异造成的，只要我们稍加配置都能轻松地办理这些兼容题目。假如我们认识标签的默认属性的话，就能很好的领略为什么会呈现兼容题目以及怎么去办理这些兼容题目。

• /* CSS hack*/ 

我很少行使hacker的，也许是小我私人风俗吧，我不喜好写的代码IE不兼容，然后用hack来办理。不外hacker还长短常好用的。行使hacker我可以把赏识器分为3类：IE6 ；IE7和飞舞；其他（IE8 chrome ff safari opera等）

◆IE6熟悉的hacker 是下划线_ 和星号 *

◆IE7 飞舞熟悉的hacker是星号 *

好比这样一个CSS配置：

• height:300px;*height:200px;_height:100px; 

IE6赏识器在读到height:300px的时辰会以为高时300px；继承往下读，他也熟悉*heihgt， 以是当IE6读到*height:200px的时辰会包围掉前一条的相斗嘴配置，以为高度是200px。继承往下读，IE6还熟悉_height,以是他又会包围掉200px高的配置，把高度配置为100px；