CSS Hacks的写法

提示：你可以在多浏览器下测试本代码




 


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  2. <html lang="en">

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  5. <title>CSS Hacks</title>

  6. <style type="text/css">

  7. body p {

  8. display: none;

  9. }

  10.  

  11.  

  12. html:first-child #opera {

  13. display: block;

  14. }

  15.  

  16. html > body #ie7 {

  17. *display: block;

  18. }

  19.  

  20. body #ie6 {

  21. _display: block;

  22. }

  23.  

  24. body:empty #firefox12 {

  25. display: block;

  26. }


  28. @-moz-document url-prefix() {

  29. #firefox {

  30. display: block;

  31. }

  32. }

  33.  

  34.  

  35. @media screen and (-webkit-min-device-pixel-ratio:0) {

  36. #safari {

  37. display: block;

  38. }

  39. }

  40.  

  41. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

  42. head~body #opera {

  43. display: block;

  44. }

  45. }

  46. </style>

  47. </head>

  48. <body>

  49. <p id="opera">我来自 Opera 7.2 - 9.5</p>

  50. <p id="safari">我是神奇的 Safari</p>

  51. <p id="firefox">我来自 Firefox</p>

  52. <p id="firefox12">我是你爷爷 Firefox 1 - 2 </p>

  53. <p id="ie7">我是囧 IE 7</p>

  54. <p id="ie6">我是脑残 IE 6</p>

  55. </body>

  56. </html>







 


 

 posted on 2010-01-23 11:05  耗子么  阅读(120)  评论(0)  编辑  收藏  举报