zoukankan      html  css  js  c++  java

  • 主流浏览器的Hack写法

    此 处的“hack”并非是网络中很神秘的组织“黑客”，而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多，比如 说在您的代码中应不应该使用hack？甚至延伸到使用“hack”是一个优秀的前端人员？其实，有时候是逼不得以，必须为之。

    有关于hack的使用方法和种类，互联系网上成千上万，比较典型的介绍有：

    大家平时看得多的应该是IE浏览器的hack写法比较多，但对于现代浏览器，比如说Safari、Chrome、Firefox等浏览器的hack写法并不多见，甚至有的不知道怎么写。如果您是属于后者，根本不知道各浏览器下具有哪些hack手段，不要着急。因为Hugo Giraudel和Tim Pietrusky将各浏览器下的hack写整理放在了Browserhacks.com之上。当然也要非常感谢Paul Irish和Nicolas Gallagher所做的补充与说明。为了国内前端开发者更好的查阅，我将Browserhacks.com上有关于各种浏览器的hack写法搬移到w3cplus上，以供大家翻阅与查找。

    一、Chrome浏览器

    选择器Hack

    1. /* Chrome 24- and Safari 5- */
    2. ::made-up-pseudo-element, .selector {
    3.   代码放在这里
    4. }  
    复制代码

    媒体查询Hacks

    1. /* Chrome, Safari 3+ */
    2. @media screen and (-webkit-min-device-pixel-ratio:0) {
    3.   代码放在这里  
    4. }  
    复制代码

    JavaScript Hack

    1. /* Chrome */
    2. var isChrome = Boolean(window.chrome);  
    复制代码

    二、Firefox浏览器

    属性选择器Hack

    1. /* Firefox 1.5 */
    2. body:empty .selector {
    3. 样式代码放这里
    4. }
    5. /* Firefox 2+ */
    6. .selector, x:-moz-any-link {
    7. 样式代码放这里  
    8. }
    9. /* Firefox 3+ */
    10. .selector, x:-moz-any-link; x:default {
    11. 样式代码放这里  
    12. }
    13. /* Firefox 3.5+ */
    14. body:not(:-moz-handler-blocked) .selector {
    15. 样式代码放这里  
    16. }  
    复制代码

    媒体查询Hack

    1. /* Firefox 3.5+, IE 9/10, Opera */
    2. @media screen and (min-resolution: +72dpi) {
    3. 样式代码放这里   
    4. }
    5. /* Firefox 3.6+ */
    6. @media screen and (-moz-images-in-menus:0) {
    7. 样式代码放这里   
    8. }
    9. /* Firefox 4+ */
    10. @media screen and (min--moz-device-pixel-ratio:0) {
    11. 样式代码放这里   
    12. }  
    复制代码

    JavaScript Hack

    1. /* Firefox */
    2. var isFF = !!navigator.userAgent.match(/firefox/i);

    4. /* Firefox 2 - 13 */
    5. var isFF = Boolean(window.globalStorage);

    7. /* Firefox 2/3 */
    8. var isFF = /a/[-1]=='a';

    10. /* Firefox 3 */
    11. var isFF = (function x(){})[-5]=='x';  
    复制代码

    混合型Hack

    1. /* Firefox 3+ */
    2. @-moz-document url-prefix() {
    3. 样式代码放这里   
    4. }  
    复制代码

    三、Opera浏览器属性选择器Hack

    1. /* Opera 9.25, Safari 2/3.1 */
    2. *|html[xmlns*=""] .selector {
    3. 样式代码放这里  
    4. }

    6. /* Opera 9.27 and below, Safari 2 */
    7. html:first-child .selector {
    8. 样式代码放这里  
    9. }

    11. /* Opera 9.5+ */
    12. noindex:-o-prefocus, .selector {
    13. 样式代码放这里  
    14. }  
    复制代码

    媒体查询Hack

    1. /* Opera 7 */
    2. @media all and (min- 0px){
    3. 样式代码放这里   
    4. }

    6. /* Opera 12- */
    7. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    8. 样式代码放这里   
    9. }

    11. /* Opera, Firefox 3.5+, IE 9/10 */
    12. @media screen and (min-resolution: +72dpi) {
    13. 样式代码放这里   
    14. }

    16. /* Opera, IE 8/9/10 */
    17. @media screen {
    18. 样式代码放这里   
    19. }  
    复制代码

    JavaScript Hack

    1. /* Opera 9.64- */
    2. var isOpera = /^function (/.test([].sort);

    4. /* Opera 12- */
    5. var isOpera = Boolean(window.opera);  
    复制代码

    四、Safari浏览器属性选择器Hack

    1. /* Safari 2/3 */
    2. html[xmlns*=""] body:last-child .selector {
    3. 样式代码放这里   
    4. }
    5. html[xmlns*=""]:root .selector  {
    6. 样式代码放这里   
    7. }

    9. /* Safari 2/3.1, Opera 9.25 */
    10. *|html[xmlns*=""] .selector {
    11. 样式代码放这里   
    12. }

    14. /* Safari 5- and Chrome 24- */
    15. ::made-up-pseudo-element, .selector {
    16. 样式代码放这里   
    17. }  
    复制代码

    媒体查询Hack

    1. /* Safari */
    2. var isSafari = /a/.__proto__=='//';  
    复制代码

    五、IE浏览器

    选择器Hack

    1. /* IE 6 and below */
    2. * html .selector  {
    3. 样式代码放这里   
    4. }
    5. .**yie6.selector {
    6. 样式代码放这里   
    7. } /* .**yie6 can be any unused class */

    9. /* IE 7 and below */
    10. .selector, {
    11. 样式代码放这里   
    12. }

    14. /* IE 7 */
    15. *:first-child+html .selector {
    16.   样式代码放这里  
    17. }
    18. .selector, x:-IE7 {
    19. 样式代码放这里   
    20. }
    21. *+html .selector {
    22. 样式代码放这里   
    23. }

    25. /* Everything but IE 6 */
    26. html > body .selector {
    27. 样式代码放这里   
    28. }

    30. /* Everything but IE 6/7 */
    31. html > /**/ body .selector {
    32.   样式代码放这里  
    33. }
    34. head ~ /* */ body .selector {
    35. 样式代码放这里   
    36. }

    38. /* Everything but IE 6/7/8 */
    39. :root *> .selector {
    40. 样式代码放这里   
    41. }
    42. body:last-child .selector {
    43. 样式代码放这里   
    44. }
    45. body:nth-of-type(1) .selector {
    46. 样式代码放这里   
    47. }
    48. body:first-of-type .selector {
    49. 样式代码放这里   
    50. }  
    复制代码

    属性/属性值 Hack

    1. /* IE 6 */
    2. .selector { _color: blue; }
    3. .selector { -color: blue; }

    5. /* IE 6/7 - any combination of these characters:
    6. ! [        DISCUZ_CODE_249        ]nbsp;& * ( ) = % + @ , . / ` [ ] # ~ ? : <  > | */
    7. .selector { !color: blue; }
    8. .selector { $color: blue; }
    9. .selector { &color: blue; }
    10. .selector { *color: blue; }
    11. /* ... */

    13. /* IE 6/7 - acts as an !important */
    14. .selector { color: blue !ie; }
    15. /* string after ! can be anything */

    17. /* IE 8/9 */
    18. .selector { color: blue/; }
    19. /* must go at the END of all rules */

    21. /* IE 9/10 */
    22. .selector:nth-of-type(1n) { color: blue9; }

    24. /* IE 6/7/8/9/10 */
    25. .selector { color: blue9; }
    26. .selector { color/***/: blue9; }

    28. /* Everything but IE 6 */
    29. .selector { color/**/: blue; }
    复制代码

    媒体查询Hack

    1. /* IE 6/7 */
    2. @media screen9 {
    3. 样式代码放这里   
    4. }

    6. /* IE 6/7/8 */
    7. @media screen\,screen9 {
    8. 样式代码放这里   
    9. }

    11. /* IE 8 */
    12. @media screen {
    13. 样式代码放这里   
    14. }

    16. /* IE 8/9/10 & Opera */
    17. @media screen {
    18. 样式代码放这里   
    19. }

    21. /* IE 9/10, Firefox 3.5+, Opera */
    22. @media screen and (min-resolution: +72dpi) {
    23. 样式代码放这里   
    24. }

    26. /* IE 9/10 */
    27. @media screen and (min-0) {
    28. 样式代码放这里   
    29. }

    31. /* IE 10+ */
    32. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    33. 样式代码放这里   
    34. }

    36. /* Everything but IE 6/7/8 */
    37. @media screen and (min- 400px) {
    38. 样式代码放这里   
    39. }
    复制代码

    JavaScript Hack

    1. /* IE <= 8 */
    2. var isIE = 'v'=='v';  
    复制代码
    1. /* IE 6 */
    2. (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 6]><i></i><![endif]-->";
    3. var isIE = checkIE.getElementsByTagName("i").length == 1;
    复制代码
    1. /* IE 7 */
    2. (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 7]><i></i><![endif]-->";
    3. var isIE = checkIE.getElementsByTagName("i").length == 1;
    4. navigator.appVersion.indexOf("MSIE 7.")!=-1  
    复制代码
    1. /* IE 8 */
    2. (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 8]><i></i><![endif]-->";
    3. var isIE = checkIE.getElementsByTagName("i").length == 1;
    复制代码
    1. /* IE 9 */
    2. (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 9]><i></i><![endif]-->";
    3. var isIE = checkIE.getElementsByTagName("i").length == 1;
    复制代码
    1. /* IE 10 */
    2. var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;  

    4. /* IE 10 */
    5. var isIE = document.body.style.msTouchAction != undefined;
    复制代码

    上面列出各个浏览器下hack的写法，当然在实际运用之中并不建议使用hack。如果你的页面需要hack来处理时，请先检查你的css或者js，如果实在无法达到要求，在考虑使用hack来处理。

    特别声明：以上展示的hack代码均来自于：http://browserhacks.com/
  • 相关阅读:
    在x-code中添加全局变量
    项目中可能用到的demo
    iOS UIWebView 加载不被信任的 https 页面
    iOS 用Xcode自带的 symbolicatecrash 工具来解析的.crash文件
    iOS Push Notifications 开关按钮找不到
    iOS 使用系统自带的UITabbarItem的badge，通过setBadgeValue来设置tabar的角标。
    UITabbarItem imageview 实现点击有放大然后还原的动画效果
    iOS 把自己的库上传到cocoapods步骤，podspec配置。
    iOS 判断NSDictionary里是否有某个key。防止接收数据找不到key或者根据key取值的时候闪退。
    获取tabar点击事件 UITabBarControllerDelegate
  • 原文地址：https://www.cnblogs.com/lglijing/p/3325852.html
Copyright © 2011-2022 走看看