300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 浏览器兼容css hack CSS Hack技术解决多浏览器兼容问题

浏览器兼容css hack CSS Hack技术解决多浏览器兼容问题

时间:2024-03-18 08:26:34

相关推荐

浏览器兼容css hack CSS Hack技术解决多浏览器兼容问题

本文向大家描述一下如何使用CSS Hack技巧解决DIV+CSS布局多浏览器兼容问题,针对不同的浏览器写不同的CSS代码的过程,就叫CSS Hack,相信本文介绍一定会让你有所收获。

CSS Hack技巧汇总

CSS Hack简介

我们在用DIV+CSS制作网页时,由于不同的浏览器,比如InternetExplorer6,InternetExplorer7,MozillaFirefox等对CSS的支持及解析结果不一样,导致生成的页面效果不一样,得不到我们所需要的页面效果。这时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS代码的过程,就叫CSS Hack。

为了向你展示这些CSS Hack是否正常运作,我新建六个P标签,并给每一个P标签一个特有的id。这将向你展示CSS Hack的运作情况。

我来自Opera7.2-9.5

我是神奇的Safari

我来自Firefox

我是FF前辈Firefox1-2

我是IE7

我是残品IE6

然后我让这些P标签默认都不显示

bodyp{display:none;}

使用IE CSS条件注释区分IE浏览器

最简单的区分IE浏览器的方法自然是使用他们的条件注释。微软创建了一个强大的语法来让我们去实现这个功能。我不想再详细地介绍IE条件注释了,我想你在搜索引擎能搜索到上万个搜索条目,我这里只要这两个:

使用CSS解析器Hacks区分IE

虽说IE条件注释十分简单好用,但是如果你想把全部的CSS放到一个文件里的话,那么你不得不使用别的方法。注意这里的IE7Hack将只对IE7有效,因为IE6根本不知道>选择符。同时你也得注意>选择符对于其他浏览器同样是无效的。

/*IE7*/

html>body#ie7

{*display:block;}

/*IE6*/

body#ie6

{_display:block;}

CSS Hack区分Firefox

第一个使用了body:empty来区分Firefox1和2。第二个hack使用了全部Firefox浏览器的专有扩展-moz。-moz只对Firefox有效,使用这个Hack大可不必担心其他浏览器的影响。

/*Firefox1-2*/

body:empty#firefox12

{display:block;}

/*Firefox*/

@-moz-documenturl-prefix()

{#firefox{display:block;}}

CSS Hack区分Safari

Safari的CSS Hack与Firefox的hack看起来很像,使用的是Safari浏览器的专有扩展-webkit且只对Safari浏览器有效。

/*Safari*/

@mediascreenand(-webkit-min-device-pixel-ratio:0)

{#safari{display:block;}}

CSS Hack区分Opera

/*Opera*/

@mediaalland(-webkit-min-device-pixel-ratio:10000),

notalland(-webkit-min-device-pixel-ratio:0)

{head~body#opera{display:block;}}

然后,全部合在一起便是完整代码:

-//W3C//DTDHTML4.01//EN"

"/TR/html4/strict.dtd">

CSSBrowserHacks

bodyp

{

display:none;

}

/*Opera*/

html:first-child#opera

{

display:block;

}

/*IE7*/

html>body#ie7

{

*display:block;

}

/*IE6*/

body#ie6

{

_display:block;

}

/*Firefox1-2*/

body:empty#firefox12

{

display:block;

}

/*Firefox*/

@-moz-documenturl-prefix()

{

#firefox{display:block;}

}

/*Safari*/

@mediascreenand(-webkit-min-device-pixel-ratio:0)

{

#safari{display:block;}

}

/*Opera*/

@mediaalland(-webkit-min-device-pixel-ratio:10000),

notalland(-webkit-min-device-pixel-ratio:0)

{

head~body#opera{display:block;}

}

我来自Opera7.2-9.5

我是神奇的Safari

我来自Firefox

我是FF前辈Firefox1-2

我是囧IE7

我是残品IE6

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。