資源描述:
《css兼容性問題》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫(kù)。
1、css兼容性問題amp;amp;amp;amp;csshack以前做網(wǎng)頁(yè)的時(shí)候,只考慮ie6和ff的兼容性,公司換了,要求也高了,ff和ie678要全兼容了,碰到要單獨(dú)hackie8的。當(dāng)然,用注釋非常方便,只要添加相應(yīng)的注釋就可以解決。但問題是,為了一句css寫多一個(gè)文件,或者在header上添加注釋,那顯然不是懶人的習(xí)慣做法。結(jié)論如下:selector{property:value:A所有瀏覽器*/property:value9;/*所有ie瀏覽器*/+property:value;/水ie7水/—property當(dāng)然,注意順序。根據(jù)css的優(yōu)先性,上面的
2、寫法,分別針對(duì)firefox、ie8、ie7和ie6顯示值。讓我們看看這個(gè):CSS代碼如下:代碼如下:p.ie{height:60px;text-align:center;line-height:60px;border:lpxdashedttbbb:background:#f7f7f7;font:15;color:blue;//所有瀏覽器color:brown9://所有ie瀏覽器+color:red;//ie7color:green;//ie6html代碼:代碼如下:It;bodystyle=width:500px:margin:Oauto:gt:lt;pc
3、lass=iegt;It;spanstyle=display:block:display:none9;gt;嘿嘿,小子竟然也用firefox,藍(lán)色文字。It;/spangt;It;!—[ifie8]gt;不錯(cuò)不錯(cuò),挺先進(jìn)的嘛,使用ie8呢!文字是褐色的。It;![endif]—gt;It;!—[ifie7]gt;你,ie7,紅色文字!It;![endif]—gt;It;!—[ifie6]gt;孩子,雖然顯示的是綠色文字,不過,ie6可不是好東西呢!It:![endif]—gt;It;/pgt;It;/bodygt;注意下面介紹的這些hack寫法僅適用于xhtm
4、l1.0。如果沒有在html最前加上It;!doctypehtmlpublic-//w3c//dtdxhtmll.Otransitional//enxmlns=gt;那么效果將不一樣!此外,這里所說的ie8,不是指ie8的兼容模式,因?yàn)閕e8的兼容模式其實(shí)就是ie7。區(qū)別ie6、7與ff/ie8:background:blue;氺background:orange;引用顯示效果:ie6/7:orangeff/ie8:blue原理:ff/ie8不支持*開頭,而ie6/7都支持。區(qū)別ie6與ie7/ie8/ff:background:green:_backgrou
5、nd:blue:引用顯示效果:ie7/8/ff:greenie6:blue原理:ie6支持下劃線_,ie7、8和Hrefox均不支持下劃線。區(qū)別ff/ie8和ie6/7:background:orange;+background:green;-background:blue;或者important;氺background:blue;引用顯示效果:ie6:blueie7:greenff/ie8:orange原理:ie6能識(shí)別-,ie7能識(shí)別+,ie8和ff都不能識(shí)別+和-ie8/ff都不識(shí)別*,ie7優(yōu)先識(shí)別!important,ie6不能識(shí)別!importan
6、to關(guān)于ie8的hacks:?test{color:/*林/#00f9;/*ie8only*/color:#00f9;A適用于所有ie版本*/}可同時(shí)區(qū)分ie8、ie7、ie6、firefox的csshacks:?test{color:#000;/^firefox*/color:/***/#00f9;/*ie8*/*color:#f00;/*ie7*/color:#0f0;/*ie6*/添加相應(yīng)的注釋解決兼容性問題注釋相應(yīng)的CSS文件:It;linkrel=stylesheettype=text/csshref=css/style.cssmedia=scree
7、n/gt;It:!--[ifie6]gt;It;1inkrel=stylesheettype=text/csshref=css/ie6style.cssmedia=screen/gt;It;![endif]—gt;It;!—[ifie7]gt;It:linkrel=stylesheettype=text/csshref=css/ie7style.cssmedia=screen/gt;It;![endif]—gt;It;!—[ifgteie8]gt;It;1inkrel=stylesheettype=text/csshref=css/ie8style.cssme
8、dia=screen/gt;It;![