网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

CSSHack技术解决多浏览器兼容问题是怎样的

本篇文章为大家展示了CSS Hack技术解决多浏览器兼容问题是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

创新互联建站专注于企业成都全网营销、网站重做改版、运城网站定制设计、自适应品牌网站建设、HTML5购物商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为运城等各大城市提供网站开发制作服务。

向大家描述一下如何使用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;}}

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

    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

 

CSS Hack虽好且方便兼容各浏览器,但是通不过W3C验证,所以还得自己权衡是否有必要去使用。

上述内容就是CSS Hack技术解决多浏览器兼容问题是怎样的,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


当前文章:CSSHack技术解决多浏览器兼容问题是怎样的
网页网址:http://bjjierui.cn/article/pchieh.html

其他资讯