css兼容性问题

《css兼容性问题》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、css兼容性问题amp;amp;amp;amp;csshack以前做网页的时候，只考虑ie6和ff的兼容性，公司换了，要求也高了，ff和ie678要全兼容了，碰到要单独hackie8的。当然，用注释非常方便，只要添加相应的注释就可以解决。但问题是，为了一句css写多一个文件，或者在header上添加注释，那显然不是懒人的习惯做法。结论如下：selector{property:value:A所有浏览器*/property:value9;/*所有ie浏览器*/+property:value;/水ie7水/—property当然，注意顺序。根据css的优先性，上面的

2、写法，分别针对firefox、ie8、ie7和ie6显示值。让我们看看这个：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，蓝色文字。It;/spangt;It;!—[ifie8]gt;不错不错，挺先进的嘛，使用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的兼容模式，因为ie8的兼容模式其实就是ie7。区别ie6、7与ff/ie8:background:blue;氺background:orange;引用显示效果：ie6/7：orangeff/ie8:blue原理：ff/ie8不支持*开头，而ie6/7都支持。区别ie6与ie7/ie8/ff：background:green:_backgrou

5、nd:blue:引用显示效果：ie7/8/ff：greenie6:blue原理：ie6支持下划线_，ie7、8和Hrefox均不支持下划线。区别ff/ie8和ie6/7：background:orange;+background:green;-background:blue;或者important;氺background:blue;引用显示效果：ie6：blueie7：greenff/ie8:orange原理：ie6能识别-，ie7能识别+，ie8和ff都不能识别+和-ie8/ff都不识别*，ie7优先识别！important，ie6不能识别！importan

6、to关于ie8的hacks：•test{color:/*林/#00f9;/*ie8only*/color:#00f9;A适用于所有ie版本*/}可同时区分ie8、ie7、ie6、firefox的csshacks：•test{color:#000;/^firefox*/color:/***/#00f9;/*ie8*/*color:#f00;/*ie7*/color:#0f0;/*ie6*/添加相应的注释解决兼容性问题注释相应的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;![