css多瀏覽器兼容方法

css多瀏覽器兼容方法

ID：6647171

大小：81.50 KB

頁(yè)數(shù)：10頁(yè)

時(shí)間：2018-01-21

css多瀏覽器兼容方法_第1頁(yè)
css多瀏覽器兼容方法_第2頁(yè)
css多瀏覽器兼容方法_第3頁(yè)
css多瀏覽器兼容方法_第4頁(yè)
css多瀏覽器兼容方法_第5頁(yè)
資源描述：

《css多瀏覽器兼容方法》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、div+css兼容ie6ie7ie8ie9和FireFoxChrome等瀏覽器方法1.DOCTYPE影響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,margin-right)方可居中4.FF:設(shè)置padding后,div會(huì)增加height和width,但I(xiàn)E不會(huì),故需要用!important多設(shè)一個(gè)height和width5.FF:支持!imp

2、ortant,IE則忽略,可用!important為FF特別設(shè)置樣式6.div的垂直居中問(wèn)題:vertical-align:middle;將行距增加到和整個(gè)DIV一樣高line-height:200px;然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行7.cursor:pointer可以同時(shí)在IEFF中顯示游標(biāo)手指狀，hand僅IE可以8.FF:鏈接加邊框和背景色，需設(shè)置display:block,同時(shí)設(shè)置float:left保證不換行。參照menubar,給a和menubar設(shè)置高度是為了避免底邊顯示錯(cuò)位,若不設(shè)

3、height,可以在menubar中插入一個(gè)空格。9.在mozillafirefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：div{margin:30px!important;margin:28px;}注意這兩個(gè)margin的順序一定不能寫反，據(jù)阿捷的說(shuō)法!important這個(gè)屬性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣：div{maring:30px;margin:28px}重復(fù)定義的話按照最后一個(gè)來(lái)執(zhí)行，所以不可以只寫margin:XXpx!important;11.ul標(biāo)簽在

4、Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}就能解決大部分問(wèn)題注意事項(xiàng)：1、float的div一定要閉合。例如：(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)?

這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。這段代碼在IE中毫無(wú)問(wèn)題，問(wèn)題出在FF。原因是NOTfl

5、oatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。在

之間加上這個(gè)div一定要注意聲明位置，一定要放在最恰當(dāng)?shù)牡胤?，而且必須與兩個(gè)具有float屬性的div同級(jí)，之間不能存在嵌套關(guān)系，否則會(huì)產(chǎn)生異常。并且將clear這種樣式定義為為如下即可：.clear{clear:both;}此外，為了讓高度能自動(dòng)適應(yīng)，要在wrapper里面加上overflow:hidden;當(dāng)

6、包含float的box的時(shí)候，高度自動(dòng)適應(yīng)在IE下無(wú)效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性(萬(wàn)惡的IE)用zoom:1;可以做到，這樣就達(dá)到了兼容。例如某一個(gè)wrapper如下定義：.colwrapper{overflow:hidden;zoom:1;margin:5pxauto;}2、margin加倍的問(wèn)題設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6都存在的bug。解決方案是在這個(gè)div里面加上display:inline;例如：相應(yīng)的c

7、ss為#IamFloat{float:left;margin:5px;/*IE下理解為10px*/display:inline;/*IE下再理解為5px*/}3、關(guān)于容器的包涵關(guān)系很多時(shí)候，尤其是容器內(nèi)有平行布局，例如兩、三個(gè)float的div時(shí)，寬度很容易出現(xiàn)問(wèn)題。在IE中，外層的寬度會(huì)被內(nèi)層更寬的div擠破。一定要用Photoshop或者Firework量取像素級(jí)的精度。4、關(guān)于高度的問(wèn)題如果是動(dòng)態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動(dòng)伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。（似乎有時(shí)候不會(huì)自動(dòng)往下?lián)伍_(kāi)，不

8、知道具體怎么回事）5、最狠的手段-!important;如果實(shí)在沒(méi)有辦法解決一些細(xì)節(jié)問(wèn)題,可以用這個(gè)方法.FF對(duì)于”!important”會(huì)自動(dòng)優(yōu)先解析,然而IE則會(huì)忽略.如下?.tabd1{background:url(/res/images/up/tab1.gif)no-repeat0px0px!important;/*Sty

當(dāng)前文檔最多預(yù)覽五頁(yè)，下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁(yè)，下載文檔查看全文
溫馨提示：
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫的文件，查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常，文件下載后無(wú)此問(wèn)題，請(qǐng)放心下載。
2. 本文檔由用戶上傳，版權(quán)歸屬用戶，天天文庫(kù)負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容，確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載，若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無(wú)法下載或下載錯(cuò)誤，付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。