資源描述：
《跨瀏覽器兼容性總結(jié)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。
1、跨瀏覽器兼容性總結(jié)一.CSS樣式兼容1.FLOAT閉合（clearingfloat）網(wǎng)頁(yè)在某些瀏覽器上顯示錯(cuò)位很多時(shí)候都是因?yàn)槭褂昧薴loat浮動(dòng)而沒(méi)有真正閉合，這也是div無(wú)法自適應(yīng)高度的一個(gè)原因。如果父div沒(méi)有設(shè)float而其子div卻設(shè)了float的話，父div無(wú)法包住整個(gè)子DIV,這種情況一般出現(xiàn)在一個(gè)父DIV下包含多個(gè)子DIVo解決辦法：1）給父DIV也設(shè)上float2）在所有子DIV后新加一個(gè)空DIV（目前Ext是這么做的），比如：.parent{width:lOOpx;}.sonl{floa
2、t:left;width:20px;}.son2{float:left;width:80px;}.clear{clear:both;margin:0;pardingO;height:Opx;font-size:Opx;}
3）萬(wàn)能float閉合將以下代碼加入GlobalCSS中,給需要閉合的div加上class』'c
3、learfix”即可,屢試不爽。/*ClearFix*/?clearfix:after{content:n.n;display:block;height:0;clear:both;visibil.ity:hidden;}.clearfix{display:inline-block;}/*HidefromIEMac*/.clearfix{display:block;}/*EndhidefromIEMac*//*endofclearfix*/:after（偽對(duì)象），設(shè)置在對(duì)象后發(fā)
4、生的內(nèi)容，通常和content配合使用，IE不支持此偽對(duì)象，非le瀏覽器支持，所以并不影響到IE/WIN瀏覽器。這種的最麻煩。4）overflow:auto只要在父DIV的CSS中加上overflow:auto就搞定。舉例：?parent{width:lOOpx;overflow:auto}.sonl{float:left;width:20px;}.son2{float:left;width:80px;}5、s=,fson2nx/div>
原理是，外圍元素之所以不能很好的延伸，問(wèn)題出在了overflow上，因?yàn)閛verflow不可見(jiàn)(見(jiàn)W3C的解釋)?，F(xiàn)在只要將給外圍元素添加一個(gè)“overflow:auto",就可以解決問(wèn)題，結(jié)果是除了IE,真的可以解決。下來(lái)就要解決IE的問(wèn)題了，再加上“_height:2%”，這個(gè)問(wèn)題就完全解決了。我試了一下，其實(shí)不加［height：］%“在IE下也行，留著吧。1.截字省略號(hào).hh{-o-text-overflow:ellipsis;text-overflow:el
6、lipsis;white-space:nowrap;overflow:hidden;}這個(gè)是在越出長(zhǎng)度后會(huì)自行的截掉多出部分的文字，并以省略號(hào)結(jié)尾。技術(shù)是好技術(shù)，很多人都喜歡亂用，但注意Firefox并不支持。頁(yè)面加上這句就可以讓頁(yè)面兼容IE7了供參考！給大家提醒一個(gè)漂浮需要注意的問(wèn)題注意設(shè)置DIV寬和高注意設(shè)置overflow:hidden;注意閉合針對(duì)火狐父div樣式display:inline-blo
7、ck;2.cursor:hand和cursor:pointerfirefox不支持hand,但ie支持pointer解決方法：統(tǒng)一使用pointer3.CSS透明幾款瀏覽器對(duì)透明度的支持方式各不相同，為了保證在IE,Firefox,Chrome,Safari等主流瀏覽器下都能正常顯示透明度的效果，我們可以定義一個(gè)透明度的class,因?yàn)橐粚懢鸵獙?條，省的每次都復(fù)制來(lái)復(fù)制去了。具體代碼如下：?transparent{filter:alpha(opacity=60);/*支持IE瀏覽器★/-moz-opac讓
8、y:0.6;/*支持FireFox瀏覽器★/opacity:0.6;/★支持Chrome,Opera,Safari等瀏覽器*/}1.css中的width和padding在IE7和FF中width寬度不包括padding,在Ie6中包括paddingo具體參見(jiàn)附錄1第一節(jié)理解CSS盒子模型更多參見(jiàn)附錄1：跨瀏覽器兼容的CSS編碼準(zhǔn)則和技巧二、JavaScript兼容1.children與childNodesIE提供
