五月 27

五月 27th, 2010浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

Html/Css/Ps - Kelvin8:24

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="gb2312" />
  5. <title>CSS Browser Hacks</title>
  6. <style>
  7. body p {
  8.     display: none;
  9. }
  10. /* Opera */
  11. html:first-child #opera {
  12.     display: block;
  13. }
  14. /* IE 7 */
  15. html > body #ie7 {
  16.     *display: block;
  17. }
  18. /* IE 6 */
  19. body #ie6 {
  20.     _display: block;
  21. }
  22. /* Firefox 1 - 2 */
  23. body:empty #firefox12 {
  24.     display: block;
  25. }
  26. /* Firefox */
  27. @-moz-document url-prefix() {
  28.     #firefox {
  29.         display: block;
  30.     }
  31. }
  32. /* Safari */
  33. @media screen and (-webkit-min-device-pixel-ratio:0) {
  34.     #safari {
  35.         display: block;
  36.     }
  37. }
  38. /* Opera */
  39. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  40.     head~body #opera {
  41.         display: block;
  42.     }
  43. }
  44. </style>
  45. </head>
  46.  
  47. <body>
  48. <p id="opera">我来自 Opera 7.2 - 9.5</p>
  49. <p id="safari">我是神奇的 Safari</p>
  50. <p id="firefox">我来自 Firefox</p>
  51. <p id="firefox12">我是你爷爷 Firefox 1 - 2 </p>
  52. <p id="ie7">我是囧 IE 7</p>
  53. <p id="ie6">我是脑瘸 IE 6</p>
  54. </body>
  55. </html>

Rss 2.0TrackBack

本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议，转载请注明作者及出处。

Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

相关日志

随机日志

« Css3 新特性

1个 评论 (发表您的评论)

  1. talk:

    引用 | #1比尔盖茨 回复这条评论 Says @ 六月 14th, 2010 at 16:06

    请问可有兴趣来我的微软工作？

要说点啥就在这吧