瀏覽器兼容性解決方案

1、所有瀏覽器通用height: 100px;IE6專用_height: 100px;IE6專用*height: 100px;IE7專用*+height: 100px;IE7、FF共用height: 100px !important;什么是瀏覽器兼容：當(dāng)我們使用不同的瀏覽器（Firefox IE7 IE6 ）訪問同一個(gè) 網(wǎng)站，或者頁面的時(shí)候，會(huì)出現(xiàn)一些不兼容的問題，在這種瀏覽器下顯示正常， 在另一種下就亂了，我們?cè)诰帉慍SS的時(shí)候會(huì)很惱火，岡雁復(fù) 了這個(gè)瀏覽器的 問題，結(jié)果另外一個(gè)瀏覽器卻出了新問題。好吧，我服了行吧，那我就利用你們的不兼容各寫一段css，讓他們各執(zhí)行各的，呵呵。一、!import

2、ant （功能有限）隨著IE7對(duì)!important的支持，!important方法現(xiàn)在只針對(duì)IE6的兼容.（注意寫法.記得該聲明位置需要提前.）例如：#example （width: 100px !important; /* IE7+FF */width: 200px; /* IE6 */二、CSSHACK方法（新手可以看看，高手就當(dāng)路過吧）首先需要知道的是：所有瀏覽器通用height: 100px;IE6專用_height: 100px;IE7專用*+height: 100px;IE6、IE7共用*height: 100px;IE7、FF共用height: 100px !important

3、;例如：#example height:100px; /* FF */* html #example height:200px; /* IE6 */*+html #example height:300px; /* IE7 */下面的這種方法比較簡(jiǎn)單舉幾個(gè)例子：1、IE6 - IE7+FF#example height:100px; /* FF+IE7 */_height:200px; /* IE6 */其實(shí)這個(gè)用上面說的第一種方法也可以#example height:100px !important; /* FF+IE7 */height:200px; /* IE6 */2、IE6+IE7 -

4、 FF#example height:100px; /* FF */*height:200px; /* IE6+IE7 */3、IE6+FF - IE7 #example height:100px; /* IE6+FF */ *+height:200px; /* IE7 */4、IE6 IE7 FF各不相同#example (height:100px; /* FF */_height:200px; /* IE6 */*+height:300px; /* IE7 */或：#example (height:100px; /* FF */*height:300px; /* IE7 */_height

5、:200px; /* IE6 */需要注意的是，代碼的順序一定不能顛倒了,要不乂前功盡棄了。因?yàn)闉g覽器在 解釋程序的時(shí)候，如果重名的話，會(huì)用后面的覆蓋前面的，就象給變量賦值一個(gè) 道理，所以我們把通用的放前面，越專用的越放后面解釋一下4的代碼：讀代碼的時(shí)候，第一行height:100px;大家都通用，IE6 IE7 FF都顯示100px到了第二行*height:300px;FF不認(rèn)識(shí)這個(gè)屆性，IE6 IE7都認(rèn)，所以FF還顯示100px，而IE6 IE7把第一行得到的height屆性給覆蓋了，都顯示300px到了第三行_height:200px;只有IE6認(rèn)識(shí)，所以IE6就乂覆蓋了在第二行得到的

6、height,最終顯示200px這樣，三個(gè)瀏覽器都有自己的height屆性了，各玩各的去吧這樣說要是你還不明白，要么你去撞墻，要么我去！不過還是你去比較好。哦，差點(diǎn)忘了說了：*+html對(duì)IE7的兼容必須保證HTM頃部有如下聲明：！DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.01 Transitional/EN對(duì)css縮寫的支持問題：不論是ie還是ff對(duì)css的縮寫都有一小點(diǎn)問題比如border: 0 xp solid #fff;兩個(gè)瀏覽器支持都沒有問題但對(duì)于四個(gè)邊的magin不同情況下，就不能用這種縮寫了，無論是ie還是ff乂會(huì)出現(xiàn)邊界解釋錯(cuò)誤，而導(dǎo)致頁面變形正

7、確縮寫：border-width:0px 1px 2px 3px;border-style:solid;border-color:#fff;第二點(diǎn)是ie對(duì)于css的magin padding等默認(rèn)值為0px，但ff卻不一樣，為 了保持外觀的統(tǒng)一性，即使padding為0你也要寫上，以免ff在瀏覽中的錯(cuò)位。IE與Firefox的CSS兼容大全1. DOCTYP叫向CSS處理2. FF: div設(shè)置margin-left, margin-right為auto時(shí)已經(jīng)居中，IE不行3. FF: body設(shè)置text-align時(shí)，div需要設(shè)置margin: auto（主要是margin-left,m

8、argin-right）方可居中4. FF:設(shè)置padding后,div會(huì)增加height和width,但I(xiàn)E不會(huì)，故需要 用!important多設(shè)一個(gè)height和width5. FF:支持!important, IE則忽略，可用!important為FF特別設(shè)置樣式，值得注意的是，一定要將xxxx !important這句放置在另一句之上6. div的垂直居中問題：vertical-align:middle;將行距增加到和整個(gè)DIV 樣高line-height:200px;然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行7. cursor: pointer可以同時(shí)在IE FF中顯示游

9、標(biāo)手指狀，hand僅IE可以8. FF:鏈接加邊框和背景色，需設(shè)置display: block,同時(shí)設(shè)置float: left保證不換行。參照menubar,給a和menubar設(shè)置高度是為了避免底邊顯示錯(cuò) 位，若不設(shè)height,可以在menubar中插入一個(gè)空格。9.在mozilla firefox和IE中的BOX莫型解釋不一致導(dǎo)致相差2px解決方法：divmargin:30px!important;margin:28px;注意這兩個(gè)margin的順序一定不能寫反，據(jù)阿捷的說法!important這個(gè)屆性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣：divmaring:3

10、0px;margin:28px重復(fù)定義的話松照最后一個(gè)來執(zhí)行，所以不可以只寫margin:XXpx!important;10.IE5和IE6的BOX#釋不一致IE5下divwidth:300px;margin:0 10px 0 10px;div的寬度會(huì)被解釋為300px-10px（右填充）-10px（左填充）最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px（右填充）+10px（左填充）=320px來計(jì)算的。這時(shí)我們可以做如下修改divwidth:300px!important;width /*/:340px;margin:0 10px 0 10px關(guān)于這個(gè)/

11、*/是什么我也不太明白，只知道IE5和firefox都支持但I(xiàn)E6不支持, 如果有人理解的話，請(qǐng)告訴我一聲，謝了！：）11.ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的，而在IE中只有margin有值所 以先定義ulmargin:0;padding:0;就能解決大部分問題注意事項(xiàng)：1、float的div一定要閉合。例如：（其中floatA、floatB的屆性已經(jīng)設(shè)置為float:left;）這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽, 必須將float標(biāo)簽閉合。在之間加上這個(gè)div一定要注

12、意聲明位置，一定要放在最恰當(dāng)?shù)牡胤剑冶仨毰c兩個(gè)具有float屆性的div同級(jí)，之間不能存在嵌套關(guān)系，否則會(huì)產(chǎn)生異常。并且將clear這種樣式定義為為如下即可：.clearclear:both;此外，為了讓高度能自動(dòng)適應(yīng)，要在wrapper里面加上overflow:hidden;當(dāng)包含float的box的時(shí)候，高度自動(dòng)適應(yīng)在IE下無效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屆性（萬惡的IE啊?。┯脄oom:1;可以做到，這樣就達(dá)到了兼容。例如某一個(gè)wrapper如下定義：.colwrapperoverflow:hidden;zoom:1;margin:5px auto;2、margin加倍的問

13、題。 設(shè)置為 float 的 div 在 ie 下設(shè)置的 margin 會(huì)加倍。這是一個(gè)ie6 都存在的 bug 解決方案是在這個(gè) div 里面加上 display:inline;例如：相應(yīng)的css為#IamFloatfloat:left;margin:5px;/*IE下理解為10px*/display:inline;/*IE下再理解為5px*/3、關(guān)于容器的包涵關(guān)系很多時(shí)候，尤其是容器內(nèi)有平行布局，例如兩、三個(gè)float的div時(shí)，寬度很容 易出現(xiàn)問題。在IE中，外層的寬度會(huì)被內(nèi)層更寬的div擠破。一定要用Photoshop或者Firework量取像素級(jí)的精度。4、關(guān)于周度的I可題如果是動(dòng)態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動(dòng)伸縮，然而如果是 靜態(tài)的內(nèi)容，高度最好定好。(似乎有時(shí)候不會(huì)自動(dòng)往下?lián)伍_， 不知道具體怎么 回事)5、最狠的手段-!important;如果實(shí)在沒有辦法解決一些細(xì)節(jié)問題，可以用這個(gè)方法.FF對(duì)于!important”會(huì) 自動(dòng)優(yōu)先解析，然而IE則會(huì)忽略.