浏览器Hack演示
<!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <base target="_blank" /> <link type="text/css" href="css/reset.css" rel="stylesheet"/> <link type="text/css" href="css/layout.css" rel="stylesheet"/> <script type="text/javascript" src='js/jquery-1.8.0.min.js'></script> <!--[if lte IE 6]> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script> <script type="text/javascript"> DD_belatedPNG.fix('.fixpng,.bg_wrapper'); </script> <![endif]--> <style type="text/css"> body{ color:#000; } @charset "gb2312"; /*样式重置*/ html,body,div,span,h1,h2,h3,h4,h5,h6,a,p,hr,dl,dt,dd,ol,ul,li,strong,em,img,input,menu,abbr,blockquote,q,cite,del,ins,address,dfn,kbd,samp,form,label,legend,fieldset,iframe,object,button,sub,sup,pre,code,var,bdo, table,thead,tfoot,tbody,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align: baseline;} html\:abbr,abbr{background: #fafad2;cursor: help;border-bottom: 1px dashed #000;} body{font:12px/160% verdana,geneva,arial,helvetica,SimSun;text-align: center; background: #fff;-webkit-text-size-adjust:none;}li{list-style:none;} a:link,a:visited{text-decoration:none; }a:hover{text-decoration: none;_text-decoration: underline; } hr{margin: 3px 0 2px 0;border-top:1px solid silver; height: 1px; clear: both;}@-moz-document url-prefix(){hr{ margin:3px 0;}} table{border-collapse:separate;border-spacing:0;} /*浏览器色块标示*/ .test{ height:30px; background:#eee;border-bottom:#cacaca 1px solid;line-height: 20px; padding-top:10px; } .test span{ display:inline-block; height:20px; width:20px; padding:0 6px;margin-right: 8px;} .ie6{ background: #1e90ff; } .ie7{ background: orange; } .ie8{ background: #ba55d3; } .ie9{ background: #ff1493; } .ie10{ background: #ff4500; } .Gecko{ background: #228b22; } .WebKit{ background: #20b2aa; } /*hack样式*/ .hacks{ font-size: 14px;line-height: 50px;margin-top: 10px; background: #ba55d3\0; /* IE 8 */ +background: orange; /* IE 7 */ _background: #1e90ff; /* IE 6 */ } :root .hacks{ background: #ff1493\9\0; /* IE 9 */ } @-moz-document url-prefix() {.hacks {background:#228b22;/* Gecko内核 */}} @media screen and (-webkit-min-device-pixel-ratio:0) {.hacks{background:#20b2aa;/* WebKit内核 */}} @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {.hacks{background:#ff4500 !important;/* IE 10+ */}} </style> </head> <body> <div class="test"> IE6<span class="ie6"></span> IE7<span class="ie7"></span> IE8<span class="ie8"></span> IE9<span class="ie9"></span> IE10<span class="ie10"></span> Gecko内核<span class="Gecko"></span> WebKit内核<span class="WebKit"></span> </div> <br> 注:firefox是Gecko内核;<br> google chrome和safari是WebKit内核;<br> opera也转用WebKit内核了,新版本用没用不清楚。 <div class="hacks">我的背景色是效果</div> <br> <br> <br> <p>以下是浏览器和flash插件版本信息</p> <br> <br> <script type="text/javascript" charset="utf-8"> /* 浏览器和flashplay检查 */ (function() { var CKobject= { _K_:function(d){return document.getElementById(d);}, getVideo:function(s){ var v=''; if(s){ for(var k in s){ v+='<source src="'+k+'"'; if(s[k]){ v+=' type="'+s[k]+'"'; } v+='>'; } } return v; }, getVars:function(v,k){ if(v[k]){ return v[k]; } }, getParams:function(v){ var p=''; if(v){ if(this.getVars(v,'p')==1 && this.getVars(v,'m')!=1){ p+=' autoplay="autoplay"' } if(this.getVars(v,'e')==1){ p+=' loop="loop"' } if(this.getVars(v,'m')==1){ p+=' preload="meta"' } if(this.getVars(v,'i')){ p+=' poster="'+this.getVars(v,'i')+'"' } } return p; }, browser:function(){ var m = (function(ua){ var a=new Object(); var b = { msie: /msie/.test(ua) && !/opera/.test(ua), opera: /opera/.test(ua), safari: /webkit/.test(ua) && !/chrome/.test(ua), firefox: /firefox/.test(ua), chrome: /chrome/.test(ua) }; var vMark = ""; for (var i in b) { if (b[i]) { vMark = "safari" == i ? "version" : i; break; } } b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0"; b.ie = b.msie; b.ie6 = b.msie && parseInt(b.version, 10) == 6; b.ie7 = b.msie && parseInt(b.version, 10) == 7; b.ie8 = b.msie && parseInt(b.version, 10) == 8; a.B=vMark; a.V=b.version; return a; })(window.navigator.userAgent.toLowerCase()); return m; }, Platform:function(){ var w=''; var u = navigator.userAgent, app = navigator.appVersion; var b={ iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, iPad: u.indexOf('iPad') > -1, ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, webKit: u.indexOf('AppleWebKit') > -1, gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, presto: u.indexOf('Presto') > -1, trident: u.indexOf('Trident') > -1, mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), webApp: u.indexOf('Safari') == -1 }; for (var k in b){ if(b[k]){ w=k; break; } } return w; }, Flash:function(){ var f=false,v=0; if(document.all){ try { var s=new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); f=true; var vs=s.GetVariable("$version"); v=parseInt(vs.split(" ")[1].split(",")[0]); } catch(e){} } else{ if (navigator.plugins && navigator.plugins.length > 0){ var s=navigator.plugins["Shockwave Flash"]; if (s){ f=true; var w = s.description.split(" "); for (var i = 0; i < w.length; ++i){ if (isNaN(parseInt(w[i]))) continue; v = parseInt(w[i]); } } } } return {f:f,v:v}; }, embedHTML5:function(C,P,W,H,V,A,S){ var v='', b=this.browser()['B'], v=this.browser()['V'], x=v.split('.'), t=x[0], m=b+v, n=b+t, w='', s=false, f=this.Flash()['f'], a=false; if(!S){ S=['iPad','iPhone','ios']; } for(var i=0;i<S.length;i++){ w=S[i]; if (w.indexOf('+')>-1){ w=w.split('+')[0]; a=true; } else{ a=false; } if(this.Platform()==w|| m==w || n==w || b==w){ if(a){ if(!f){ s=true; break; } } else{ s=true; break; } } } if(s){ v='<video controls id="'+P+'" width="'+W+'" height="'+H+'"'+this.getParams(A)+'>'+this.getVideo(V)+'</video>'; this._K_(C).innerHTML=v; this._K_(C).style.width=W+'px'; this._K_(C).style.height=H+'px'; this._K_(C).style.backgroundColor='#000'; } }, getflashvars:function(s){ var v='',i=0; if(s){ for(var k in s){ if(i>0){ v+='&'; } v+=k+'='+s[k]; i++; } } return v; }, getparam:function(s){ var w='',v='', o={ allowScriptAccess:'always', allowFullScreen:true, quality:'high', bgcolor:'#000' }; if(s){ for(var k in s){ o[k]=s[k]; } } for(var e in o){ w+=e+'="'+o[e]+'" '; v+='<param name="'+e+'" value="'+o[e]+'" />'; } w=w.replace('movie=','src='); return {w:w,v:v}; }, getObjectById:function (s){ var X = null, Y = this._K_(s), r = "embed"; if (Y && Y.nodeName == "OBJECT") { if (typeof Y.SetVariable != 'undefined') { X = Y; } else { var Z = Y.getElementsByTagName(r)[0]; if (Z) { X = Z; } } } return X; }, embedSWF:function(C,D,N,W,H,V,P){ if(!N){N='ckplayer_a1'} if(!P){P={};} var u='undefined', j=document, r='http://www.macromedia.com/go/getflashplayer', t='<a href="'+r+'" target="_blank">请点击此处下载安装最新的flash插件</a>', error={ w:'您的网页不符合w3c标准,无法显示播放器', f:'您没有安装flash插件,无法播放视频,'+t, v:'您的flash插件版本过低,无法播放视频,'+t }, w3c=typeof j.getElementById != u && typeof j.getElementsByTagName != u && typeof j.createElement != u, i='id="'+N+'" name="'+N+'" ', s='', l=''; P['movie']=C; P['flashvars']=this.getflashvars(V); s+='<object pluginspage="http://www.macromedia.com/go/getflashplayer" '; s+='classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" '; s+='codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" '; s+='width="'+W+'" '; s+='height="'+H+'" '; s+=i; s+='align="middle">'; s+=this.getparam(P)['v']; s+='<embed '; s+=this.getparam(P)['w']; s+=' width="'+W+'" height="'+H+'" name="'+N+'" id="'+N+'" align="middle" '+i; s+='type="application/x-shockwave-flash" pluginspage="'+r+'" />'; s+='</object>'; if(!w3c){ l=error['w']; } else{ if(!this.Flash()['f']){ l=error['f']; } else{ if(this.Flash()['v']<10){ l=error['f']; } else{ l=s; } } } if(l){ this._K_(D).innerHTML=l; } } } window.CKobject = CKobject; })(); </script> <p id="aboutme"></p> <script type="text/javascript"> var aboutme=''; aboutme+='平台(浏览器)内核:'+CKobject.Platform()+'<br />'; aboutme+='浏览器:'+CKobject.browser()['B']+'<br />'; aboutme+='浏览器版本:'+CKobject.browser()['V']+'<br />'; aboutme+='是否安装了flash插件:'+CKobject.Flash()['f']+'<br />'; if(CKobject.Flash()['f']){ aboutme+='flash插件版本:'+CKobject.Flash()['v']+'<br />'; } CKobject._K_('aboutme').innerHTML=aboutme; </script> </body> </html>