資源描述：
《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;
