WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; }

.clearfix { display:inline-block; }

/* Hide from IE Mac */

.clearfix {display:block;}

/* End hide from IE Mac */

/* end of clearfix */或者这样设置：.hackbox{display:table; //将对象作为块元素级的表格显⽰}技巧六：div嵌套时 y轴上 padding和 marign的问题FF⾥

y 轴上 ⼦div 到 ⽗div 的距离为 ⽗padding + ⼦marignIE⾥

y 轴上 ⼦div 到 ⽗div 的距离为 ⽗padding和 ⼦marign⾥⼤的⼀个FF⾥

y 轴上 ⽗padding=0 且

border=0 时，⼦div 到 ⽗div 的距离为0，⼦marign 作⽤到 ⽗div 外⾯**技巧七：⽗级盒⼦的BFC **marign 重合问题： 当两个垂直边界相遇时，它们将形成⼀个边界。这个边界的⾼度等于两个发⽣叠加的边界的⾼度中的较⼤者。总的有以下解决⽅式：外层

padding透明边框

border:1px solid transparent;.绝对定位

postion:absolute:外层DIV

overflow:hidden;内层DIV　加

float:left;display:inline;外层DIV 有时会⽤到zoom:1;

2023年6月21日发(作者：)

WEB前端开发⼈员须知的常见浏览器兼容问题及解决技巧为什么会有兼容问题？由于浏览器种类众多，不同的浏览器其内核亦不尽相同，故各个浏览器对⽹页的解析有⼀定出⼊，这也是导致浏览器兼容问题出现的主要原因，我们的⽹页需要在主流浏览器上正常运⾏，就需要做好浏览器兼容。使⽤Trident内核的浏览器：IE、Maxthon、TT；使⽤Gecko内核的浏览器：Netcape6及以上版本、FireFox；使⽤Presto内核的浏览器：Opera7及以上版本；使⽤Webkit内核的浏览器：Safari、Chrome。现在说的兼容性问题，主要是说IE与⼏个主流浏览器如firefox，google等。⽽对IE浏览器来说，IE7⼜是个跨度，因为之前的版本更新甚慢，bug甚多。从IE8开始，IE浏览器渐渐遵循标准，到IE9后由于⼤家都⼀致认为标准很重要，可以说在兼容性上⽐较好，但在中国来说，由于xp的占有率问题，使⽤IE7以下的⽤户仍然很多，所以不得不考虑低版本浏览器的兼容。对浏览器兼容问题，⼀般分，HTML，Javascript兼容，CSS兼容。 其中html相关问题较容易处理，⽆⾮是⾼版本浏览器⽤了低版本浏览器⽆法识别的元素，致其不能解析，所以平时注意⼀点。特别是HTML5增加了许多新标签，低版本浏览器有点影响时代进步啊问题⼀：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写⼏个标签，不加样式控制的情况下，各⾃的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是王道问题六：标签最低⾼度设置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使⽤hack 我可以把浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）ie6认识的hack 是下划线_ 和星号

*ie7 遨游认识的hack是星号

* （包括上⾯问题6中的

!important也算是hack的⼀种。不过实⽤性较⼩。）⽐如这样⼀个css设置 height:300px;*height:200px;_height:100px;ie6浏览器在读到 height:300px的时候会认为⾼时300px；继续往下读，他也认识*heihgt， 所以当ie6读到*height:200px的时候会覆盖掉前⼀条的相冲突设置，认为⾼度是200px。继续往下读，ie6还认识_height,所以他⼜会覆盖掉200px⾼的设置，把⾼度设置为100px；ie7和遨游也是⼀样的从⾼度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把⾼度解析为200px；剩下的浏览器只认识第⼀个height:300px;所以他们会把⾼度解析为300px。因为优先级相同且相冲突的属性设置后⼀个会覆盖掉前⼀个，所以书写的次序是很重要的。/* CSS属性级Hack */

color:red; /* 所有浏览器可识别*/_color:red; /* 仅IE6 识别 */*color:red; /* IE6、IE7 识别 */+color:red; /* IE6、IE7 识别 */*+color:red; /* IE6、IE7 识别 */[color:red; /* IE6、IE7 识别 */

color:red9; /* IE6、IE7、IE8、IE9 识别 */color:red0; /* IE8、IE9 识别*/color:red90; /* 仅IE9识别 */color:red 0; /* 仅IE9识别 */color:red!important; /* IE6 不识别!important 有危险*//* CSS选择符级Hack */

*html #demo { color:red;} /* 仅IE6 识别 */*+html #demo { color:red;} /* 仅IE7 识别 */body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别

*/

head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */:root #demo { color:red9; } : /* 仅IE9识别 */越少的浮动，就会越少的代码，会有更灵活的页⾯，会有扩展性更强的页⾯。这不多说，归结为到⼀定⽔平了，浮动会⽤的较少。另外，您也会避免使⽤浮动+margin的⽤法。所以，越后来越不易遇到这种bug。技巧⼆：padding，marign，height，width注意是技巧，不是⽅法： 写好标准头

/TR/xhtml1/DTD/”> /1999/xhtml”> 尽量⽤padding，慎⽤margin，height尽量补上100%，⽗级height有定值⼦级height不⽤100%，⼦级全为浮动时底部补个空clear:both的div宽尽量⽤margin，慎⽤padding，width算准实际要的减去padding技巧三：显⽰类（display:block,inline）display:block,inline两个元素display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同⼀⾏排列的的效果display:table; //for FF,模拟table的效果display:block块元素，元素的特点是： 总是在新⾏上开始；⾼度，⾏⾼以及顶和底边距都可控制；宽度缺省是它的容器的100%，除⾮设定⼀个宽度display:inline就是将元素显⽰为⾏内元素，元素的特点是：和其他元素都在⼀⾏上；⾼，⾏⾼及顶和底边距不可改变；宽度就是它的⽂字或图⽚的宽度，不可改变。span，a，label，input，img，strong和em是

inline 元素的例⼦技巧四：怎样使⼀个div层居中于浏览器中？1）2）div⾥的内容，IE默认为居中，⽽FF默认为左对齐，可以尝试增加代码margin: 0 auto;技巧五：float的div闭合;清除浮动;⾃适应⾼度① 例如：＜div id="floatA">＜div id="floatB">＜div id="NOTfloatC">这⾥的NOTfloatC并不希望继续平移，⽽是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)这段代码在IE中毫⽆问题，问题出在FF。原因是NOTfloatC并⾮float标签，必须将float标签闭合。在＜divclass="floatB">＜divclass="NOTfloatC">之间加上＜div class="clear">这个div⼀定要注意位置，⽽且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产⽣异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}②作为外部

wrapper 的

div 不要定死⾼度,为了让⾼度能⾃适应，要在wrapper⾥⾯加上overflow:hidden; 当包含float的box的时候，⾼度⾃适应在IE下⽆效，这时候应该触发IE的layout私有属性⽤zoom:1;可以做到，这样就达到了兼容。例如某⼀个wrapper如下定义：.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}③对于排版,我们⽤得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后⾯做⼀个统⼀的背景,譬如: