常見浏覽器兼容問題有哪些？​前端工程師如何解決？浏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題，指網頁在各種浏覽器上的顯示效果可能不一緻而産生浏覽器和網頁間的兼容問題。一個專業的Web前端工程師，一定要會處理浏覽器兼容問題，接下來小編就給大家分享一下常見的浏覽器兼容問題。

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，以達到高度自适應.

7)關于手形光标cursor: pointer，而hand隻适用于IE。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!