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

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

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

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

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

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

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

8、以解決.IE9.對齊文本與文本輸入框問題加上 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 定義的是類,理論上可以無限重復(fù), 這樣需要多次引用的定義便可以使用 屬性的優(yōu)先級: ID 的優(yōu)先級要高于的優(yōu)先級要高于class方便JS等客戶端腳本,如果在頁面中要對某個對象進(jìn)行腳本操作,那么可以給他定義一個ID,否則只能

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

10、于瀏覽器中？這里我們使用百分比絕對定位,與外補(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居中問題 div設(shè)置 margin-left, margin-right 為 auto 時已經(jīng)居中，IE 不行，IE需要設(shè)定body居中，首先在父級元素定義text-algin: center;這個的意思就是在父級元素內(nèi)的內(nèi)容居中。 15.P標(biāo)簽嵌套塊元素問

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

12、sited 之后（如果存在的話），這樣樣式才能生效。17.游標(biāo)手指cursorcursor: pointer 可以同時在可以同時在 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;，就能解決大部分問題 。 19.FORM標(biāo)簽 這個標(biāo)簽在IE中,將會自動margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 paddin

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

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

15、nd: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)提過。23.為什么FF下文本無法撐開容器高度 標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設(shè)置呢？ 辦法就是去掉height設(shè)置min-height:200px; 這里為了照顧不認(rèn)識min-height的IE6 可以這樣定

16、義: 24.IE滾動條顏色解決辦法:將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: 點狀輪廓dashed：虛線輪廓bor

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

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

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

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

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

22、斷的內(nèi)容 例如：例如： 使用較為頻繁的CSS Hack技術(shù)!important使用最廣的莫過于!important，它可以針對IE（IE7.0能正確理解!important）和非IE瀏覽器設(shè)置不同的樣式，只要在非IE瀏覽器樣式的后面加上!important，就可以針對其優(yōu)先了。所以為了兼容IE6與火狐之間的差異，一般都會用!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ū)別符號：區(qū)別符號：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è)置橘色說明：說明：因為因為IE系列瀏覽器可讀（系列瀏覽器可讀（9），而），而IE6和和IE7可讀（可讀（*），另外），另外IE6可辨識（可辨識（_），因此可以依照順序?qū)懴聛恚蜁尀g覽器），因此可以依照順序?qū)懴聛恚蜁尀g覽器正確的讀取到自己看得懂的正確的讀取到自己看得懂的CSS語法，所以就可以

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

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

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

27、以辨識（可以辨識（!important），但無法辨識（），但無法辨識（*），而），而IE7則可以同時看懂（則可以同時看懂（*）和（）和（!important），因此可以兩個辨），因此可以兩個辨識符號來區(qū)別識符號來區(qū)別IE7和和Firefox。6、區(qū)分IE6、IE7（方法一）區(qū)別符號：區(qū)別符號： * _例：例：#tip *background : blue; /IE7背景設(shè)置藍(lán)色背景設(shè)置藍(lán)色_background : black; /IE6背景設(shè)置黑色背景設(shè)置黑色說明：說明：因為因為IE7和和IE6都可以辨識（都可以辨識（*），但是），但是IE6可以辨識（可以辨識（_），），IE7卻無法辨識，透過卻無法辨識，透過IE7無法辨識（無法辨識（_）的特性，就可以輕松區(qū)）的特性，就可以輕松區(qū)分分IE6和和IE7