CSSHack技术解决多浏览器兼容问题

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

成都创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽，联通大带宽，移动大带宽，多线BGP大带宽租用,是为众多客户提供专业绵阳服务器托管报价，主机托管价格性价比高，为金融证券行业服务器托管，ai人工智能服务器托管提供bgp线路100M独享，G口带宽及机柜租用的专业成都idc公司。

CSS Hack技巧汇总

CSS Hack简介

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

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

 
 
 
    
  
  
  
  1. 我来自Opera7.2-9.5
     
    2.   
  
  
  2. 我是神奇的Safari
     
    3.   
  
  
  3. 我来自Firefox
     
    4.   
  
  
  4. 我是FF前辈Firefox1-2
     
    5.   
  
  
  5. 我是IE7
     
    6.   
  
  
  6. 我是残品IE6
     
    7.   
  
  
  7.  
    8.

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2. bodyp{display:none;}  
    3.   
  
  
  3.  
    4.   
  
  
  4.  
    5.

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

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.

#p#使用CSS解析器Hacks区分IE

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

 
 
 
    
  
  
  
  1. /*IE7*/  
    2.   
  
  
  2. html>body#ie7  
    3.   
  
  
  3. {*display:block;}  
    4.   
  
  
  4.  
    5.   
  
  
  5. /*IE6*/  
    6.   
  
  
  6. body#ie6  
    7.   
  
  
  7. {_display:block;}  
    8.   
  
  
  8.  
    9.

CSS Hack区分Firefox

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

 
 
 
    
  
  
  
  1. /*Firefox1-2*/  
    2.   
  
  
  2. body:empty#firefox12  
    3.   
  
  
  3. {display:block;}  
    4.   
  
  
  4.  
    5.   
  
  
  5. /*Firefox*/  
    6.   
  
  
  6. @-moz-documenturl-prefix()  
    7.   
  
  
  7. {#firefox{display:block;}}  
    8.

CSS Hack区分Safari

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

 
 
 
    
  
  
  
  1. /*Safari*/  
    2.   
  
  
  2. @mediascreenand(-webkit-min-device-pixel-ratio:0)  
    3.   
  
  
  3. {#safari{display:block;}}  
    4.   
  
  
  4.  
    5.

 #p#CSS Hack区分Opera

 
 
 
    
  
  
  
  1. /*Opera*/  
    2.   
  
  
  2. @mediaalland(-webkit-min-device-pixel-ratio:10000),  
    3.   
  
  
  3. notalland(-webkit-min-device-pixel-ratio:0)  
    4.   
  
  
  4. {head~body#opera{display:block;}}  
    5.   
  
  
  5.  
    6.

然后，全部合在一起便是完整代码：

 
 
 
    
  
  
  
  1.   
  
  
  2.  
    3.   
  
  
  3. "http://www.w3.org/TR/html4/strict.dtd"> 
    4.   
  
  
  4.  
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7. CSSBrowserHacks 
    8.   
  
  
  8.  
    9.   
  
  
  9. bodyp  
    10.   
  
  
  10. {  
    11.   
  
  
  11. display:none;  
    12.   
  
  
  12. }  
    13.   
  
  
  13. /*Opera*/  
    14.   
  
  
  14. html:first-child#opera  
    15.   
  
  
  15. {  
    16.   
  
  
  16. display:block;  
    17.   
  
  
  17. }  
    18.   
  
  
  18. /*IE7*/  
    19.   
  
  
  19. html>body#ie7  
    20.   
  
  
  20. {  
    21.   
  
  
  21. *display:block;  
    22.   
  
  
  22. }  
    23.   
  
  
  23. /*IE6*/  
    24.   
  
  
  24. body#ie6  
    25.   
  
  
  25. {  
    26.   
  
  
  26. _display:block;  
    27.   
  
  
  27. }  
    28.   
  
  
  28. /*Firefox1-2*/  
    29.   
  
  
  29. body:empty#firefox12  
    30.   
  
  
  30. {  
    31.   
  
  
  31. display:block;  
    32.   
  
  
  32. }  
    33.   
  
  
  33. /*Firefox*/  
    34.   
  
  
  34. @-moz-documenturl-prefix()  
    35.   
  
  
  35. {  
    36.   
  
  
  36. #firefox{display:block;}  
    37.   
  
  
  37. }  
    38.   
  
  
  38. /*Safari*/  
    39.   
  
  
  39. @mediascreenand(-webkit-min-device-pixel-ratio:0)  
    40.   
  
  
  40. {  
    41.   
  
  
  41. #safari{display:block;}  
    42.   
  
  
  42. }  
    43.   
  
  
  43. /*Opera*/  
    44.   
  
  
  44. @mediaalland(-webkit-min-device-pixel-ratio:10000),  
    45.   
  
  
  45. notalland(-webkit-min-device-pixel-ratio:0)  
    46.   
  
  
  46. {  
    47.   
  
  
  47. head~body#opera{display:block;}  
    48.   
  
  
  48. }  
    49.   
  
  
  49.  
    50.   
  
  
  50.  
    51.   
  
  
  51.  
    52.   
  
  
  52.  
    53.   
  
  
  53. 我来自Opera7.2-9.5
     
    54.   
  
  
  54. 我是神奇的Safari
     
    55.   
  
  
  55. 我来自Firefox
     
    56.   
  
  
  56. 我是FF前辈Firefox1-2
     
    57.   
  
  
  57. 我是囧IE7
     
    58.   
  
  
  58. 我是残品IE6
     
    59.   
  
  
  59.  
    60.   
  
  
  60.  
    61.

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

新闻名称：CSSHack技术解决多浏览器兼容问题
地址分享：http://www.gawzjz.com/qtweb2/news7/5307.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸网站建设知识

同城分类信息

成都微信开发　　 　手机网站建设　　 　成都网站排名　　 　主机租用　　 　盐亭网站建设　　 　重庆外贸网站建设　　 　广汉锦华　　 　成都展柜设计公司　　 　成都网络公司　　 　边坡防护网厂家　　 　消防维保　　 　温江网站建设　　 　鸿艺文化传播　　 　衣柜书柜酒柜定制　　 　商城系统开发　　 　正泰动物　　 　网站空间　　 　成都网站建设　　 　成都网站推广　　 　网站建设