常用瀏覽器的兼容問(wèn)題總結(jié)

1、常用瀏覽器的兼容問(wèn)題總結(jié)王國(guó)軍王國(guó)軍什么是瀏覽器兼容問(wèn)題？ 瀏覽器兼容性問(wèn)題又被稱(chēng)為網(wǎng)頁(yè)兼容性或網(wǎng)站兼容性問(wèn)題，指網(wǎng)頁(yè)在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁(yè)間的兼容問(wèn)題。 通俗的講，就是使用不同的瀏覽器（Firefox、Chrome、IE6、IE7等）訪問(wèn)同一個(gè)網(wǎng)站，或者頁(yè)面的時(shí)候，在一個(gè)瀏覽器下顯示正常，在另一個(gè)瀏覽器下就全亂了。 不同的瀏覽器對(duì)CSS解釋不同。最常用到的瀏覽器“最頭疼”的瀏覽器如何在IE5、6、7、8中調(diào)試頁(yè)面？IETesterIE瀏覽器開(kāi)發(fā)人員工具瀏覽器兼容性有些什么問(wèn)題呢？1.div的垂直居中問(wèn)題 vertical-align：middle； line-h

2、eight: 200px;將行距增加到和整個(gè)DIV一樣高 ，然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行。2.margin加倍的問(wèn)題設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。 這是一個(gè)IE6都存在的bug解決方案是在這個(gè)div里面加上display:inline; #Iamfloat float:left; margin:5px;/*IE下理解為下理解為10px*/ display:inline;/*IE下再理解為下再理解為5px*/display: inline; 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。

3、3.浮動(dòng)IE產(chǎn)生雙倍距離問(wèn)題#box float:left; width:100px; margin:0 0 0 100px; /這種情況之下這種情況之下IE會(huì)產(chǎn)生會(huì)產(chǎn)生200px的距離的距離 display:inline; /使浮動(dòng)忽略使浮動(dòng)忽略 這里細(xì)說(shuō)一下這里細(xì)說(shuō)一下block與與inline兩個(gè)元素：兩個(gè)元素： block元素的特點(diǎn)：總是在新行上開(kāi)始元素的特點(diǎn)：總是在新行上開(kāi)始,高度高度,寬度寬度,行高行高,邊距都可以控制邊距都可以控制(塊元素塊元素); Inline元素的特點(diǎn)：和其他元素在同一行上元素的特點(diǎn)：和其他元素在同一行上,不可控制不可控制(內(nèi)嵌元素內(nèi)嵌元素); #box di

4、splay:block; /可以為內(nèi)嵌元素模擬為塊元素可以為內(nèi)嵌元素模擬為塊元素 display:inline; /實(shí)現(xiàn)同一行排列的效果實(shí)現(xiàn)同一行排列的效果 diplay:table; .4.IE與寬度和高度的問(wèn)題IE 不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來(lái)使。這樣問(wèn)題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用min-width和min-height的話(huà)，IE下面根本等于沒(méi)有設(shè)置寬度和高度。 比如要設(shè)置背景圖片，這個(gè)寬度是比較重要的。要解決這個(gè)問(wèn)題，可以這樣： #box width: 80px; height: 35px

5、;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px; 5.頁(yè)面的最小寬度問(wèn)題min -width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè)，而它實(shí)際上把width當(dāng)做最小寬度來(lái)使。為了讓這一命令在IE上也能用，可以把一個(gè) 放到 標(biāo)簽下，然后為div指定一個(gè)類(lèi), 然后CSS這樣設(shè)計(jì)： #container min-width: 600px; width:expression(document.body.clientWidth 600?

6、 600px: auto ); 第一個(gè)min-width是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，它實(shí)際上通過(guò)Javascript的判斷來(lái)實(shí)現(xiàn)最小寬度。 缺點(diǎn)：這也會(huì)讓你的HTML文檔不太正規(guī)。6.DIV浮動(dòng)IE文本產(chǎn)生3px的問(wèn)題左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距的間距. #box float:left; width:800px; #left float:left; width:50%; #right width:50%; *html #le

7、ft margin-right:-3px; /這句是關(guān)鍵這句是關(guān)鍵 顯示區(qū)別IE67.高度不適應(yīng)問(wèn)題高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)，外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用了margin或padding時(shí)。例： 解決辦法：在P對(duì)象前后各加一個(gè)div對(duì)象，對(duì)這個(gè)div對(duì)象添加一個(gè)border屬性即可。8.IE圖片下有空隙產(chǎn)生問(wèn)題 解決這個(gè)BUG的方法也有很多,可以是改變html的排版,或者設(shè)置img 為display:block 或者設(shè)置vertical-align 屬性為 vertical-align:top | bottom |middle |text-bottom 都可以解決

8、.IE9.對(duì)齊文本與文本輸入框問(wèn)題加上 vertical-align:middle; input width:200px; height:30px; border:1px solid red; vertical-align:middle; 10.web標(biāo)準(zhǔn)中id與class有區(qū)別嗎WEB標(biāo)準(zhǔn)中是不容許重復(fù)ID的,比如 div id=abc 不容許重復(fù)2次,而class 定義的是類(lèi),理論上可以無(wú)限重復(fù), 這樣需要多次引用的定義便可以使用 屬性的優(yōu)先級(jí): ID 的優(yōu)先級(jí)要高于的優(yōu)先級(jí)要高于class方便JS等客戶(hù)端腳本,如果在頁(yè)面中要對(duì)某個(gè)對(duì)象進(jìn)行腳本操作,那么可以給他定義一個(gè)ID,否則只能利用遍

9、歷頁(yè)面元素加上指定特定屬性來(lái)找到它,這是相對(duì)浪費(fèi)時(shí)間資源,遠(yuǎn)遠(yuǎn)不如一個(gè)ID來(lái)得簡(jiǎn)單.11.li中內(nèi)容超過(guò)長(zhǎng)度后以省略號(hào)顯示此方法適用于IE與OP瀏覽器 li width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; 12.為什么無(wú)法定義1px左右高度的容器 IE6下這個(gè)問(wèn)題是因?yàn)槟J(rèn)的行高造成的,解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px等。13.怎樣使一個(gè)div垂直居中于瀏覽

10、器中？這里我們使用百分比絕對(duì)定位,與外補(bǔ)丁負(fù)值的方法,負(fù)值的大小為其自身寬度高度除以二 。 div position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; 14.div居中問(wèn)題 div設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中，IE 不行，IE需要設(shè)定body居中，首先在父級(jí)元素定義text-algin: center;這個(gè)的意思就是在父級(jí)元素內(nèi)的內(nèi)容居中。 15.P標(biāo)簽嵌套塊元素問(wèn)題p標(biāo)

11、簽嵌套div div一定要遵守塊元素嵌套規(guī)則！16.鏈接訪問(wèn)后hover樣式就不出現(xiàn) 被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了,很多人應(yīng)該都遇到過(guò)這個(gè)問(wèn)題。 解決方法是改變CSS屬性的排列順序: L-V-H-A 例: a:link a:visited a:hover a:active L-V-H-A：link 選擇器選擇器 設(shè)置指向未被訪問(wèn)的鏈接樣式：visited選擇器選擇器 設(shè)置已被訪問(wèn)的頁(yè)面的鏈接：hover 選擇器選擇器 用于鼠標(biāo)指針浮動(dòng)在上面的元素：active選擇器選擇器 用于活動(dòng)鏈接 注釋?zhuān)涸?CSS 定義中，:hover 必須位于 :link 和 :visit

12、ed 之后（如果存在的話(huà)），這樣樣式才能生效。17.游標(biāo)手指cursorcursor: pointer 可以同時(shí)在可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀中顯示游標(biāo)手指狀 cursor: hand 僅僅 IE 可以可以 18.UL的padding與margin ul標(biāo)簽在FF中默認(rèn)是有padding值的,而在IE中只有margin默認(rèn)有值,所以先定義： ulmargin:0;padding:0;，就能解決大部分問(wèn)題 。 19.FORM標(biāo)簽 這個(gè)標(biāo)簽在IE中,將會(huì)自動(dòng)margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針

13、對(duì)上面兩個(gè)問(wèn)題,我的css中一般首先都使用這樣的樣式ul,formmargin:0;padding:0;。20.BOX模型解釋不一致問(wèn)題在FF和IE 中的BOX模型解釋不一致導(dǎo)致相差2px解決方法： divmargin:30px!important;margin:28px; 注意這兩個(gè) margin的順序一定不能寫(xiě)反， important這個(gè)屬性IE6不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE6下其實(shí)解釋成這樣： div maring:30px;margin:28px 重復(fù)定義的話(huà)按照最后一個(gè)來(lái)執(zhí)行。21.float的div閉合，清除浮動(dòng)例如： 這里的NOTfloatC并不希望繼續(xù)平移，而是希

14、望往下排。(其中floatA、floatB的屬性已經(jīng)設(shè)置為 float:left;) 這段代碼在IE中毫無(wú)問(wèn)題，問(wèn)題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。在 之間加上 這個(gè)div一定要注意位置，而且必須與兩個(gè)具有float屬性的div同級(jí)，之間不能存在嵌套關(guān)系，否則會(huì)產(chǎn)生異常。 并且將clear這種樣式定義為如下即可： .clear clear:both;22.最狠的手段 - !important如果實(shí)在沒(méi)有辦法解決一些細(xì)節(jié)問(wèn)題,可以用這個(gè)方法.FF對(duì)于”!important”會(huì)自動(dòng)優(yōu)先解析,然而IE6則會(huì)忽略.例 .tabd1 background:

15、url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; 值得注意的是，一定要將xxxx !important 這句放置在另一句之上，上面已經(jīng)提過(guò)。23.為什么FF下文本無(wú)法撐開(kāi)容器高度 標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會(huì)象IE6里那樣被撐開(kāi)的,那我又想固定高度,又想能被撐開(kāi)需要怎樣設(shè)置呢？ 辦法就是去掉height設(shè)置min-height:200px; 這里為了照顧不認(rèn)識(shí)min-height的IE6 可以這樣定義:

16、24.IE滾動(dòng)條顏色解決辦法:將body改為htmlhtml scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; 25.border中的dotted與dasheddotted: 點(diǎn)狀輪廓dashed：虛線輪廓border

17、屬性中dotted與dashed的區(qū)別：dotted在IE6下不兼容，顯示為dashed效果；而dashed在個(gè)瀏覽器中顯示一致dotted與dashed26.border:none與border:0的區(qū)別 體現(xiàn)有兩點(diǎn)：體現(xiàn)有兩點(diǎn)：1、理論上的性能差異；2、瀏覽器兼容性的差異。1、性能差異：、性能差異：【border：0】把border設(shè)為“0“像素雖然在頁(yè)面上看不見(jiàn)，但按border默認(rèn)值理解，瀏覽器依然會(huì)對(duì)border-width/border-color進(jìn)行渲染，即已經(jīng)占用了內(nèi)存值?！綽order：none】把border設(shè)為”none“即沒(méi)有，瀏覽器解析”none“時(shí)將不作出渲染動(dòng)作，

18、即不會(huì)消耗內(nèi)存值。2、兼容性差異：、兼容性差異：兼容性差異只針對(duì)IE6、IE7與標(biāo)簽button、input而言，在win、win7的XP主題下均會(huì)出現(xiàn)此現(xiàn)象。當(dāng)border為”none“時(shí)對(duì)IE6、IE7無(wú)效邊框依然存在，如下圖所示：當(dāng)border為”0“時(shí)對(duì)IE6、IE7，如下圖所示：當(dāng)border為”0“或者”none“時(shí)Firefox下顯示一致，如下圖所示：27.不同瀏覽器margin和padding差異較大顯示區(qū)別顯示區(qū)別28.在IE6中無(wú)法設(shè)置微型高度顯示區(qū)別29.在IE6中l(wèi)ist項(xiàng)目間出現(xiàn)空行顯示區(qū)別30.在IE6中使用float屬性會(huì)產(chǎn)生兩倍距離顯示區(qū)別31.溢出邊界問(wèn)題顯示

19、區(qū)別32.最低高度設(shè)置min-height IE6不兼容顯示區(qū)別CSS跨瀏覽器兼容性解決方案Hack什么是Hack？ CSS Hack由于不同廠商，比如Internet ,Safari,Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。 簡(jiǎn)單的說(shuō)，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然，我們也可以反過(guò)來(lái)利用CSS hac

20、k為不同版本的瀏覽器定制編寫(xiě)不同的CSS效果。一、選擇器Hack1、IE6（含）以下的版本識(shí)別（含）以下的版本識(shí)別語(yǔ)法： *html 選擇器 . 例如：*html.content width: 300px;height: 300px;border: 1px dashed #000;選擇器Hack2、只有、只有IE7識(shí)別識(shí)別語(yǔ)法： *+html 選擇器 . 例如：*+html.content width: 300px;height: 300px;border: 1px dashed #000;二、屬性Hack1、IE6（含）以下的版本識(shí)別（含）以下的版本識(shí)別語(yǔ)法： _屬性：值；2、IE7（含）以

21、下的版本識(shí)別（含）以下的版本識(shí)別語(yǔ)法： +屬性：值；條件注釋語(yǔ)法1、判斷等于某個(gè)、判斷等于某個(gè)IE瀏覽器版本的語(yǔ)法：瀏覽器版本的語(yǔ)法：語(yǔ)法： 要判斷的內(nèi)容 例如：例如： 條件注釋語(yǔ)法2、判斷、判斷IE瀏覽器的范圍：瀏覽器的范圍：gte、gt、lte、It其中：gte：表示高于或等于某個(gè)IE瀏覽器的版本gt： 表示高于某個(gè)IE瀏覽器的版本Ite： 表示低于或等于某個(gè)IE瀏覽器的版本It： 表示低于某個(gè)IE瀏覽器的版本語(yǔ)法： 要判斷的內(nèi)容 例如：例如： 條件注釋語(yǔ)法3、判斷非、判斷非IE瀏覽器瀏覽器語(yǔ)法： 要判斷的內(nèi)容 例如：例如： 條件注釋語(yǔ)法4、判斷是、判斷是IE瀏覽器瀏覽器語(yǔ)法： 要判斷的內(nèi)

22、容 例如：例如： 使用較為頻繁的CSS Hack技術(shù)!important使用最廣的莫過(guò)于!important，它可以針對(duì)IE（IE7.0能正確理解!important）和非IE瀏覽器設(shè)置不同的樣式，只要在非IE瀏覽器樣式的后面加上!important，就可以針對(duì)其優(yōu)先了。所以為了兼容IE6與火狐之間的差異，一般都會(huì)用!important。1、區(qū)分IE和非IE瀏覽器#tip background : blue;/非非IE背景設(shè)置藍(lán)色背景設(shè)置藍(lán)色background : red9;/IE6、IE7、IE8背景設(shè)置紅色背景設(shè)置紅色2、區(qū)分IE6、IE7、IE8、FF區(qū)別符號(hào)：區(qū)別符號(hào)：9 * _例：

23、例：#tip background : blue;/Firefox背景設(shè)置藍(lán)色背景設(shè)置藍(lán)色background : red9;/IE8背景設(shè)置紅色背景設(shè)置紅色*background : black;/IE7背景設(shè)置黑色背景設(shè)置黑色_background : orange;/IE6背景設(shè)置橘色背景設(shè)置橘色說(shuō)明：說(shuō)明：因?yàn)橐驗(yàn)镮E系列瀏覽器可讀（系列瀏覽器可讀（9），而），而IE6和和IE7可讀（可讀（*），另外），另外IE6可辨識(shí)（可辨識(shí)（_），因此可以依照順序?qū)懴聛?lái)，就會(huì)讓瀏覽器），因此可以依照順序?qū)懴聛?lái)，就會(huì)讓瀏覽器正確的讀取到自己看得懂的正確的讀取到自己看得懂的CSS語(yǔ)法，所以就可以有效區(qū)

24、分語(yǔ)法，所以就可以有效區(qū)分IE各版本和非各版本和非IE瀏覽器（如瀏覽器（如Firefox、Google Chrome、Safari等）等）3、區(qū)分IE6、IE7、FF（方法一）區(qū)別符號(hào)：區(qū)別符號(hào)： * _例：例：#tip background : blue;/Firefox背景設(shè)置藍(lán)色背景設(shè)置藍(lán)色*background : black;/IE7背景設(shè)置黑色背景設(shè)置黑色_background : orange;/IE6背景設(shè)置橘色背景設(shè)置橘色說(shuō)明：說(shuō)明：IE6和和IE7可讀（可讀（*），），IE6又可以讀（又可以讀（_），但是），但是IE7卻無(wú)法讀取卻無(wú)法讀取（_），至于），至于Firefox（

25、非（非IE瀏覽器）則完全無(wú)法辨識(shí)（瀏覽器）則完全無(wú)法辨識(shí)（*）和）和（_），因此就可以透過(guò)這樣的差異性來(lái)區(qū)分），因此就可以透過(guò)這樣的差異性來(lái)區(qū)分IE6、IE7和和Firefox。4、區(qū)分IE6、IE7、FF（方法二）區(qū)別符號(hào)：區(qū)別符號(hào)： * !important例：例：#tip background : blue; /Firefox背景設(shè)置藍(lán)色背景設(shè)置藍(lán)色*background : black !important; /IE7背景設(shè)置黑色背景設(shè)置黑色*background : orange; /IE6背景設(shè)置橘色背景設(shè)置橘色說(shuō)明：說(shuō)明：IE7可以辨識(shí)（可以辨識(shí)（*）和（）和（!importan

26、t），但），但I(xiàn)E6只可以讀（只可以讀（*），），卻無(wú)法辨識(shí)（卻無(wú)法辨識(shí)（!important），至于），至于Firefox可以讀取可以讀?。?important），但不能辨識(shí)（），但不能辨識(shí)（*），因此可以透過(guò)這樣的差），因此可以透過(guò)這樣的差異來(lái)有效區(qū)別異來(lái)有效區(qū)別IE6、IE7、Firefox。5、區(qū)分IE7、FF區(qū)別符號(hào)：區(qū)別符號(hào)： * !important例：例：#tip background : blue; /Firefox背景設(shè)置藍(lán)色背景設(shè)置藍(lán)色*background : black !important; /IE7背景設(shè)置黑色背景設(shè)置黑色說(shuō)明：說(shuō)明：因?yàn)橐驗(yàn)镕irefox可以辨識(shí)

27、（可以辨識(shí)（!important），但無(wú)法辨識(shí)（），但無(wú)法辨識(shí)（*），而），而IE7則可以同時(shí)看懂（則可以同時(shí)看懂（*）和（）和（!important），因此可以?xún)蓚€(gè)辨），因此可以?xún)蓚€(gè)辨識(shí)符號(hào)來(lái)區(qū)別識(shí)符號(hào)來(lái)區(qū)別IE7和和Firefox。6、區(qū)分IE6、IE7（方法一）區(qū)別符號(hào)：區(qū)別符號(hào)： * _例：例：#tip *background : blue; /IE7背景設(shè)置藍(lán)色背景設(shè)置藍(lán)色_background : black; /IE6背景設(shè)置黑色背景設(shè)置黑色說(shuō)明：說(shuō)明：因?yàn)橐驗(yàn)镮E7和和IE6都可以辨識(shí)（都可以辨識(shí)（*），但是），但是IE6可以辨識(shí)（可以辨識(shí)（_），），IE7卻無(wú)法辨識(shí)，透過(guò)卻無(wú)法辨識(shí)，透過(guò)IE7無(wú)法辨識(shí)（無(wú)法辨識(shí)（_）的特性，就可以輕松區(qū)）的特性，就可以輕松區(qū)分分IE6和和IE7。