浏览器兼容性大全指南.doc

浏览器兼容性 浏览器的内核 Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( WebKit ) Google Chrome ( WebKit ) 腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳，不过如果电脑上装的是ie8的话，这些浏览器还是调用ie7的内核。搜狗浏览器比较特殊，它有两种浏览模式：一是兼容模式，该模式使用IE内核；二是高速模式，该模式使用WebKit内核。解决ie7、ie8兼容性最好的办法是在head标签中加入meta 类型meta http-equiv=X-UA-Compatible content=IE=EmulateIE7 /，只要IE8一读到这个标签,它就会自动启动IE7兼容模式 CSS Hack 解决浏览器兼容性问题的主要方法是CSS hack。由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。 CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如 IE6能识别下划线_和星号 * ，IE7能识别星号 * ，但不能识别下划线_，而firefox两个都不能认识。等等 各浏览器CSS hack兼容表： ? IE6 IE7 IE8 Firefox Opera Safari !important ? Y ?Y Y ?Y Y? _ Y ? ? ? ? ? * Y Y ? ? ? ? *+ ? Y ? ? ? ? \9 Y Y Y ? ? ? \0 ? ? Y ? ? ? nth-of-type(1) ? ? ? ? Y Y 如何解决浏览器的兼容性 在head标签中加入meta 类型meta http-equiv=X-UA-Compatible content=IE=EmulateIE7 /，这样就解决了ie7、ie8兼容问题。现在剩下ie6、ie7、Firefox、Chrome(Safari与Chrome使用同一内核)、Opera这几种浏览器的兼容性问题，我们需要使用CSS Hack来解决该问题。代码如下所示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / meta http-equiv=X-UA-Compatible content=IE=EmulateIE7 / title浏览器兼容性问题/title style type=text/css .t1 { ?????? color:#000000; /* 所有浏览器都支持 此处填写Firefox的css*/ ?????? *color:#0000FF; /* ie6 id7 支持 此处填写ie7的css*/ ?????? _color:#66CCCC; /* ie6支持? 此处填写ie6的css*/ } @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .t1{color:#9900FF}} /* oprea支持? 此处填写oprea的css*/ @media screen and (-webkit-min-device-pixel-ratio:0) { .t1{color:#336600}/* Chrome、Safari支持? 此处填写Chrome的css*/ } /style /head body div class=t1ff、ie8、ie7、ie6、oprea、Safari兼容性css 书写模式br .t1{ ?????? color:#000000; /* 所有浏览器都支持 此处填写Firefox的css**/br ?????? *color:#0000FF;