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的运作情况。

  1. <pidpid="opera">我来自Opera7.2-9.5</p> 
  2. <pidpid="safari">我是神奇的Safari</p> 
  3. <pidpid="firefox">我来自Firefox</p> 
  4. <pidpid="firefox12">我是FF前辈Firefox1-2</p> 
  5. <pidpid="ie7">我是IE7</p> 
  6. <pidpid="ie6">我是残品IE6</p> 
  7.  

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

  1. <styletypestyletype="text/css"> 
  2. bodyp{display:none;}  
  3. </style> 
  4.  

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

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

  1. <!--[ifIE7]> 
  2. <styletypestyletype="text/css"> 
  3. </style> 
  4. <![endif]--> 
  5.  
  6. <!--[ifIE6]> 
  7. <styletypestyletype="text/css"> 
  8. </style> 
  9. <![endif]--> 

使用CSS解析器Hacks区分IE

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

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

CSS Hack区分Firefox

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

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

CSS Hack区分Safari

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

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

CSS Hack区分Opera

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

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

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

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

posted @ 2014-08-06 10:05  阳光小屋  阅读(145)  评论(0)  编辑  收藏  举报