各大浏览器兼容问题面试题（常见浏览器兼容问题有哪些）

常见浏览器兼容问题有哪些？前端工程师如何解决？浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。一个专业的Web前端工程师，一定要会处理浏览器兼容问题，接下来小编就给大家分享一下常见的浏览器兼容问题。

各大浏览器兼容问题面试题（常见浏览器兼容问题有哪些）(1)

1、设置较小高度标签在IE6、IE7、遨游中高度超出自己设置高度

解决办法：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

2、不同浏览器的标签默认的外补丁和内补丁不同，

解决办法：CSS里 *。

3、块属性标签float后，有横行的margin情况下，IE6显示margin比设置的大

解决办法：在float的标签样式控制中加入 display:inline;将其转化为行内属性。

4、标签最低高度设置min-height不兼容

解决办法：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !ImportAnt; height:200px; overflow:visible;}

5、行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

解决办法：在display:block;后面加入display:inline;display:table。

6、解决 IE6 最大、最小宽高hack方法

/* 最小宽度 */ .min_width{ min-width:300px; _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clIEntWidth); } /* 最大宽度 */ .max_width{ max-width:600px; _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth); } /* 最小高度 */ .min_height{ min-height:200px; _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight); } /* 最大高度 */ .max_height{ max-height:400px; _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight); }

7、z-index不起作用的 bug

1)IE6下首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签position属性为relative;2、问题标签含有浮动(float)属性。

2)所有浏览器：父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

8、其他兼容技巧

1)FF下给div设置padding后会导致width和height增加，但IE不会。(可用!important解决)

2)居中问题.

垂直居中。将line-height设置为当前div相同的高度, 再通过vetical-align: middle.( 注意内容不要换行。)

水平居中。 margin:0 auto;

3)若需给a标签内内容加上样式, 需要设置display: block;(常见于导航标签)

4)FF和IE对BOX理解的差异导致相差2px的还有设为float的div在ie下 margin加倍等问题.

5)ul标签在FF下面默认有list-style和padding。最好事先声明以避免不必要的麻烦。(常见于导航标签和内容列表)

6)作为外部wrapper的div不要定死高度, 最好还加上overflow: hidden，以达到高度自适应.