浏览器兼容性大全.docx
《浏览器兼容性大全.docx》由会员分享,可在线阅读,更多相关《浏览器兼容性大全.docx(23页珍藏版)》请在冰豆网上搜索。
![浏览器兼容性大全.docx](https://file1.bdocx.com/fileroot1/2023-1/10/6bd51136-fbad-4ed7-a2cf-4d2fccc9394c/6bd51136-fbad-4ed7-a2cf-4d2fccc9394c1.gif)
浏览器兼容性大全
浏览器兼容性
浏览器的内核
MozillaFirefox(Gecko)
InternetExplorer(Trident)
Opera(Presto)
Safari(WebKit)
GoogleChrome(WebKit)
腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳,不过如果电脑上装的是ie8的话,这些浏览器还是调用ie7的内核。
搜狗浏览器比较特殊,它有两种浏览模式:
一是兼容模式,该模式使用IE内核;二是高速模式,该模式使用WebKit内核。
解决ie7、ie8兼容性最好的办法是在head标签中加入meta类型,只要IE8一读到这个标签,它就会自动启动IE7兼容模式
CSSHack
解决浏览器兼容性问题的主要方法是CSShack。
由于不同的浏览器,比如InternetExplorer6,InternetExplorer7,MozillaFirefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSScode的过程,就叫CSShack,也叫写CSShack。
CSSHack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。
我们就可以根据这个来针对不同的浏览器来写不同的CSS。
比如IE6能识别下划线"_"和星号"*",IE7能识别星号"*",但不能识别下划线"_",而firefox两个都不能认识。
等等
各浏览器CSShack兼容表:
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类型,这样就解决了ie7、ie8兼容问题。
现在剩下ie6、ie7、Firefox、Chrome(Safari与Chrome使用同一内核)、Opera这几种浏览器的兼容性问题,我们需要使用CSSHack来解决该问题。
代码如下所示:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
浏览器兼容性问题
.t1
{
color:
#000000;/*所有浏览器都支持此处填写Firefox的css*/
*color:
#0000FF;/*ie6id7支持此处填写ie7的css*/
_color:
#66CCCC;/*ie6支持 此处填写ie6的css*/
}
@mediaalland(-webkit-min-device-pixel-ratio:
10000),notalland(-webkit-min-device-pixel-ratio:
0)
{.t1{color:
#9900FF}}/*oprea支持 此处填写oprea的css*/
@mediascreenand(-webkit-min-device-pixel-ratio:
0)
{
.t1{color:
#336600}/*Chrome、Safari支持 此处填写Chrome的css*/
}
ff、ie8、ie7、ie6、oprea、Safari兼容性css书写模式
.t1{
color:
#000000;/*所有浏览器都支持此处填写Firefox的css**/
*color:
#0000FF;/*ie6id7支持此处填写ie7的css*/
_color:
#66CCCC;/*ie6支持 此处填写ie6的css*/
}
/*oprea支持此处填写oprea的css*/
@mediaalland(-webkit-min-device-pixel-ratio:
10000),notalland(-webkit-min-device-pixel-ratio:
0)
{.t1{color:
#CC66FF}}
/*Chrome、Safari支持此处填写Chrome的css*/
@mediascreenand(-webkit-min-device-pixel-ratio:
0)
{
.t1{color:
#336600}}
}