所謂的瀏覽器兼容性問題苗膝，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下伶跷，我們的需求是掰读，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都應(yīng)該是統(tǒng)一的顯示效果叭莫。所以瀏覽器的兼容性問題是前端開發(fā)人員經(jīng)常會(huì)碰到和必須要解決的問題蹈集。

瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同

問題癥狀：隨便寫幾個(gè)標(biāo)簽，不加樣式控制的情況下雇初，各自的margin 和padding差異較大拢肆。

碰到頻率:100%

解決方案：CSS里 *

備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會(huì)用通配符*來設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0靖诗。

瀏覽器兼容問題二：塊屬性標(biāo)簽float后郭怪，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大

問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>

碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁面都會(huì)碰到刊橘，float布局最常見的瀏覽器兼容問題）

解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性

備注：我們最常用的就是div+CSS布局了鄙才，而div就是一個(gè)典型的塊屬性標(biāo)簽，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的促绵，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)攒庵，這就是一個(gè)必然會(huì)碰到的兼容性問題。

瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px）败晴，在IE6浓冒，IE7，遨游中高度超出自己設(shè)置高度

問題癥狀：IE6尖坤、7和遨游里這個(gè)標(biāo)簽的高度不受控制稳懒，超出自己設(shè)置的高度

碰到頻率：60%

解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。

備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里糖驴。出現(xiàn)這個(gè)問題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度僚祷。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高贮缕。

瀏覽器兼容問題四：行內(nèi)屬性標(biāo)簽辙谜，設(shè)置display:block后采用float布局，又有橫行的margin的情況感昼，IE6間距bug

問題癥狀：IE6里的間距比超過設(shè)置的間距

碰到幾率：20%

解決方案：在display:block;后面加入display:inline;display:table;

備注：行內(nèi)屬性標(biāo)簽装哆，為了設(shè)置寬高，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)定嗓。在用float布局并有橫向的margin后蜕琴，在IE6下，他就具有了塊屬性float后的橫向margin的bug宵溅。不過因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽凌简，所以我們?cè)偌由蟙isplay:inline的話，它的高寬就不可設(shè)了恃逻。這時(shí)候我們還需要在display:inline后面加入display:talbe雏搂。

瀏覽器兼容問題五：圖片默認(rèn)有間距

問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候藕施，有些瀏覽器會(huì)有默認(rèn)的間距，加了問題一中提到的通配符也不起作用凸郑。

碰到幾率：20%

解決方案：使用float屬性為img布局

備注：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽裳食，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里芙沥，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距诲祸。去掉這個(gè)間距使用float是正道。（我的一個(gè)學(xué)生使用負(fù)margin而昨，雖然能解決救氯，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）

瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容

問題癥狀：因?yàn)閙in-height本身就是一個(gè)不兼容的CSS屬性配紫，所以設(shè)置min-height時(shí)不能很好的被各個(gè)瀏覽器兼容

碰到幾率：5%

解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px径密，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto [圖片上傳失敗...(image-1fb88-1559116926155)]; height:200px; overflow:visible;}

備注：在B/S系統(tǒng)前端開時(shí)，有很多情況下我們又這種需求躺孝。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)享扔。容器的高度為300px；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)植袍，容器高度被撐高惧眠，而不是出現(xiàn)滾動(dòng)條。這時(shí)候我們就會(huì)面臨這個(gè)兼容性問題于个。

瀏覽器兼容問題七：透明度的兼容CSS設(shè)置

做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容氛魁，當(dāng)然熟練到一定的程度就沒這么麻煩了。建議經(jīng)常會(huì)碰到兼容性問題的新手使用厅篓。很多兼容性問題都是因?yàn)闉g覽器對(duì)標(biāo)簽的默認(rèn)屬性解析不同造成的秀存，只要我們稍加設(shè)置都能輕松地解決這些兼容問題。如果我們熟悉標(biāo)簽的默認(rèn)屬性的話羽氮，就能很好的理解為什么會(huì)出現(xiàn)兼容問題以及怎么去解決這些兼容問題或链。

1. /* CSS hack*/ 
   

我很少使用hacker的，可能是個(gè)人習(xí)慣吧档押，我不喜歡寫的代碼IE不兼容澳盐，然后用hack來解決。不過hacker還是非常好用的令宿。使用hacker我可以把瀏覽器分為3類：IE6 叼耙；IE7和遨游稍走；其他（IE8 Chrome ff Safari opera等）

◆IE6認(rèn)識(shí)的hacker 是下劃線_ 和星號(hào) *

◆IE7 遨游認(rèn)識(shí)的hacker是星號(hào) *

比如這樣一個(gè)CSS設(shè)置：

1. height:300px;*height:200px;_height:100px; 
   

IE6瀏覽器在讀到height:300px的時(shí)候會(huì)認(rèn)為高時(shí)300px这吻；繼續(xù)往下讀，他也認(rèn)識(shí)heihgt剔猿， 所以當(dāng)IE6讀到height:200px的時(shí)候會(huì)覆蓋掉前一條的相沖突設(shè)置癞松，認(rèn)為高度是200px爽撒。繼續(xù)往下讀冕碟，IE6還認(rèn)識(shí)_height,所以他又會(huì)覆蓋掉200px高的設(shè)置，把高度設(shè)置為100px匆浙；

IE7和遨游也是一樣的從高度300px的設(shè)置往下讀。當(dāng)它們讀到*height200px的時(shí)候就停下了厕妖，因?yàn)樗鼈儾徽J(rèn)識(shí)_height首尼。所以它們會(huì)把高度解析為200px，剩下的瀏覽器只認(rèn)識(shí)第一個(gè)height:300px;所以他們會(huì)把高度解析為300px言秸。因?yàn)閮?yōu)先級(jí)相同且想沖突的屬性設(shè)置后一個(gè)會(huì)覆蓋掉前一個(gè)软能，所以書寫的次序是很重要的。

在網(wǎng)站設(shè)計(jì)的時(shí)候举畸，應(yīng)該注意css樣式兼容不同瀏覽器問題查排，特別是對(duì)完全使用DIV CSS設(shè)計(jì)的網(wǎng)，就應(yīng)該更注意IE6 IE7 FF對(duì)CSS樣式的兼容抄沮，不然跋核，你的網(wǎng)亂可能出去不想出現(xiàn)的效果！

所有瀏覽器 通用

height: 100px;

IE6 專用

_height: 100px;

IE6 專用

*height: 100px;

IE7 專用

*+height: 100px;

IE7叛买、FF 共用

height: 100px !important;

一砂代、CSS 兼容

以下兩種方法幾乎能解決現(xiàn)今所有兼容.

1, !important (不是很推薦，用下面的一種感覺最安全)

隨著IE7對(duì)!important的支持, !important 方法現(xiàn)在只針對(duì)IE6的兼容.(注意寫法.記得該聲明位置需要提前.)

代碼:

<style>

wrapper {

width: 100px!important; /* IE7+FF */

width: 80px; /* IE6 */

}

</style>

2, IE6/IE77對(duì)FireFox <from 針對(duì)firefoxie6 ie7的css樣式>

*+html 與 html 是IE特有的標(biāo)簽, firefox 暫不支持.而+html又為 IE7特有標(biāo)簽.

代碼:

<style>

wrapper { width: 120px; } /* FireFox */

html #wrapper { width: 80px;} / ie6 fixed */

+html #wrapper { width: 60px;} / ie7 fixed, 注意順序 */

</style>

注意:

*+html 對(duì)IE7的兼容 必須保證HTML頂部有如下聲明：

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

二率挣、萬能 float 閉合(非常重要!) 可以用這個(gè)解決多個(gè)div對(duì)齊時(shí)的間距不對(duì)刻伊，

關(guān)于 clear float 的原理可參見 [How ToClear Floats Without Structural Markup]

將以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.

代碼:

<style>

/* Clear Fix */

.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 */

</style>

三、其他兼容技巧

1, FF下給 div 設(shè)置 padding 后會(huì)導(dǎo)致 width 和 height 增加, 但I(xiàn)E不會(huì).(可用!important解決)

2, 居中問題.

1).垂直居中.將 line-height 設(shè)置為當(dāng)前 div 相同的高度, 再通過 vetical-align: middle.( 注意內(nèi)容不要換行.)

2).水平居中. margin: 0 auto;(當(dāng)然不是萬能)

3, 若需給 a 標(biāo)簽內(nèi)內(nèi)容加上 樣式, 需要設(shè)置 display: block;(常見于導(dǎo)航標(biāo)簽)

4, FF 和 IE 對(duì) BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問題.

5, ul 標(biāo)簽在 FF 下面默認(rèn)有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導(dǎo)航標(biāo)簽和內(nèi)容列表)

6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達(dá)到高度自適應(yīng).

7, 關(guān)于手形光標(biāo). cursor: pointer. 而hand只適用于 IE.貼上代碼

四：如何在一個(gè)樣式里分別給一個(gè)屬性定義IE6 IE7 FF專用的兼容

height:100px;

*height:120px;

_height:150px;

在FF下椒功，第2捶箱、3個(gè)屬性FF不認(rèn)識(shí)，所以它讀的是height:100px;

在IE7下动漾，第三個(gè)屬性IE7不認(rèn)識(shí)丁屎，所以它讀第1、2個(gè)屬性谦炬，又因?yàn)榈诙€(gè)屬性覆蓋了第一個(gè)屬性悦屏，所以IE7最終讀出的是第2個(gè)屬性*height:120px;

在IE6下，三個(gè)屬性IE6都認(rèn)識(shí)键思，所以三個(gè)屬性都可以讀取础爬，又因?yàn)榈谌齻€(gè)屬性覆蓋掉前2個(gè)屬性，所以IE6最終讀取的是第三個(gè)屬性吼鳞。

五： 針對(duì)firefox ie6 ie7的css樣式

現(xiàn)在大部分都是用!important來兼容看蚜，對(duì)于ie6和firefox測試可以正常顯示，但是ie7對(duì)!important可以正確解釋赔桌，會(huì)導(dǎo)致頁面 沒按要求顯示供炎！找到一個(gè)針對(duì)IE7不錯(cuò)的兼容方式就是使用“*+html”渴逻，用IE7瀏覽，CSS可以這樣：

1 { color: #333; } /* Moz */

• html #1 { color: #666; } /* IE6 */

+html #1 { color: #999; } / IE*/

那么在firefox下字體顏色顯示為#333音诫，IE6下字體顏色顯示為#666惨奕，IE7下字體顏色顯示為#999。

2 css布局中的居中問題

主要的樣式定義如下：

body {TEXT-ALIGN: center;}

center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

說明：

首先在父級(jí)元素定義TEXT-ALIGN: center;這個(gè)的意思就是在父級(jí)元素內(nèi)的內(nèi)容居中竭钝；對(duì)于IE這樣設(shè)定就已經(jīng)可以了梨撞。

但在mozilla中不能居中。解決辦法就是在子元素定義時(shí)候設(shè)定時(shí)再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要說明的是香罐，如果你想用這個(gè)方法使整個(gè)頁面要居中卧波，建議不要套在一個(gè)DIV里，你可以依次拆出多個(gè)div庇茫，只要在每個(gè)拆出的div里定義MARGIN-RIGHT:auto;MARGIN-LEFT: auto; 就可以了港粱。

3 盒模型不同解釋.

box{

width:600px;

//for ie6.0- w\idth:500px;

//for ff+ie6.0

}

box{

width:600px!important

//for ff

width:600px;

//for ff+ie6.0

width /**/:500px;

//for ie6.0-

}

4 浮動(dòng)ie產(chǎn)生的雙倍距離

box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會(huì)產(chǎn)生200px的距離display:inline; //使浮動(dòng)忽略}

這里細(xì)說一下block,inline兩個(gè)元素,Block元素的特點(diǎn)是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點(diǎn)是:和其他元素在同一行上,…不可控制(內(nèi)嵌元素);

box{ display:block; //可以為內(nèi)嵌元素模擬為塊元素 display:inline; //實(shí)現(xiàn)同一行排列的的效果 diplay:table;

5 IE與寬度和高度的問題

IE不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來使旦签。這樣問題就大了查坪，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變宁炫，如果只用min-width和min-height的話咪惠，IE下面根本等于沒有設(shè)置寬度和高度。比如要設(shè)置背景圖片淋淀，這個(gè)寬度是比較重 要的遥昧。要解決這個(gè)問題，可以這樣：

box{ width: 80px; height: 35px;}html>body #box{width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 頁面的最小寬度

min-width是個(gè)非常方便的CSS命令朵纷，它可以指定元素最小也不能小于某個(gè)寬度炭臭，這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè)袍辞，而它實(shí)際上把 width當(dāng)做最小寬度來使鞋仍。為了讓這一命令在IE上也能用，可以把一個(gè)<div> 放到 <body> 標(biāo)簽下搅吁，然后為div指定一個(gè)類：

然后CSS這樣設(shè)計(jì)：

container{

min-width: 600px;

width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );

}

第一個(gè)min-width是正常的威创；但第2行的width使用了Javascript，這只有IE才認(rèn)得谎懦，這也會(huì)讓你的HTML文檔不太正規(guī)肚豺。它實(shí)際上通過Javascript的判斷來實(shí)現(xiàn)最小寬度。

7 清除浮動(dòng)

.兼容box{

display:table;

//將對(duì)象作為塊元素級(jí)的表格顯示

}

或者

.兼容box{

clear:both;

}

或者加入:after（偽對(duì)象）,設(shè)置在對(duì)象后發(fā)生的內(nèi)容界拦，通常和content配合使用吸申，IE不支持此偽對(duì)象，非Ie 瀏覽器支持，所以并不影響到IE/WIN瀏覽器截碴。這種的最麻煩的

……#box:after{

content: “.”;

display: block;

height: 0;

clear: both;

visibility: hidden;

}

8&nbp;DIV浮動(dòng)IE文本產(chǎn)生3象素的bug

左邊對(duì)象浮動(dòng)梳侨，右邊采用外補(bǔ)丁的左邊距來定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距.

box{

float:left;

width:800px;}

left{

float:left;

width:50%;}

right{

width:50%;

}

*html #left{

margin-right:-3px;

//這句是關(guān)鍵

}

HTML代碼

<DIV id=box>

<DIV id=left></DIV>

<DIV id=right></DIV>

</DIV>

9 屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)

p[id]{}div[id]{}

p[id]{}div[id]{}

這個(gè)對(duì)于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用

屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.

10 IE捉迷藏的問題

當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接日丹，DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問題走哺。

有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁面哲虾。

解決辦法：對(duì)#layout使用line-height屬性或者給#layout使用固定高和寬割坠。頁面結(jié)構(gòu)盡量簡單。

11 高度不適應(yīng)

高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)妒牙，特別是當(dāng)內(nèi)層對(duì)象使用

margin 或paddign 時(shí)。例：

<div id=”box”>

<p>p對(duì)象中的內(nèi)容</p>

</div>

CSS：

box {background-color:#eee; }

box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解決方法：在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性对妄。

屏蔽IE瀏覽器（也就是IE下不顯示）

:lang(zh) select {font:12px !important;} /FF,OP可見*/

select:empty {font:12px !important;} /safari可見/

這里select是選擇符湘今，根據(jù)情況更換。第二句是MAC上safari瀏覽器獨(dú)有的剪菱。

僅IE7識(shí)別

*+html {…}

當(dāng)面臨需要只針對(duì)IE7做樣式的時(shí)候就可以采用這個(gè)兼容摩瞎。

IE6及IE6以下識(shí)別

• html {…}

這個(gè)地方要特別注意很多地主都寫了是IE6的兼容其實(shí)IE5.x同樣可以識(shí)別這個(gè)兼容。其它瀏覽器不識(shí)別孝常。

html/**/ >body select {……}

這句與上一句的作用相同旗们。

僅IE6不識(shí)別

select { display /IE6不識(shí)別/:none;}

這里主要是通過CSS注釋分開一個(gè)屬性與值，流釋在冒號(hào)前构灸。

僅IE6與IE5不識(shí)別

select// { display /IE6,IE5不識(shí)別/:none;}

這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè)CSS注釋上渴。

僅IE5不識(shí)別

select/IE5不識(shí)別/ { display:none;}

這一句是在上一句中去掉了屬性區(qū)的注釋。只有IE5不識(shí)別

盒模型解決方法

selct {width:IE5.x寬度; voice-family:""}""; voice-family:inherit; width:正確寬度;}

盒模型的清除方法不是通過!important來處理的喜颁。這點(diǎn)要明確稠氮。

清除浮動(dòng)

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

在Firefox中，當(dāng)子級(jí)都為浮動(dòng)時(shí)半开，那么父級(jí)的高度就無法完全的包住整個(gè)子級(jí)隔披，那么這時(shí)用這個(gè)清除浮動(dòng)的兼容來對(duì)父級(jí)做一次定義，那么就可以解決這個(gè)問題寂拆。

截字省略號(hào)

select { -o-text-overflow:ellipsis; text-overflow:ellipsis;white-space:nowrapoverflow:hidden; }

這個(gè)是在越出長度后會(huì)自行的截掉多出部分的文字奢米，并以省略號(hào)結(jié)尾，很好的一個(gè)技術(shù)纠永。只是目前Firefox并不支持鬓长。

只有Opera識(shí)別

@media all and (min-width: 0px){ select {……} }

針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。