浏览器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>
浏览器Hack演示的更多相关文章
- 各大浏览器hack
浏览器界的奇葩IE 样式前缀法,在需要制定某些浏览器只识别其中某些属性的时候: chrome/safari 都是webkit内核的浏览器.在属性前加前缀-webkti- firefox 只在火狐浏览器 ...
- html5 兼容参考文档 与 浏览器hack兼容参考文档
移动端兼容参考文档 http://mobilehtml5.org/ 浏览器hack http://browserhacks.com/ 附上部分截图
- 各种浏览器hack
Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack ...
- CSS各个浏览器Hack的写法
Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack ...
- 常见的浏览器Hack技巧总结(转)
如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题.而浏览器兼容问题大部分也集中在对IE系列的兼容.这里就总结一下对IE系列的CSS Hack,记录一下,方便以后查阅. IE H ...
- 浏览器hack总结 详细的浏览器兼容性解决方法
由于各浏览器对页面的解析不同,会导致页面在不同浏览器中显示的样式不一致,为了保持页面的统一,经常需要对浏览器进行兼容性问题的调试. CSS Hack 面对浏览器诸多的兼容性问题,经常需要通过CSS样式 ...
- IE各浏览器HACK
border:2px solid #00f; /*IE.ff的属性*/ border:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\ ...
- 常见浏览器hack汇总
1.背景渐变bug: ①.ie8 ie9:用滤镜的方式解决: -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientT ...
- CSS各浏览器HACK
/*firefox*/@-moz-document url-prefix(){.mainNews div.l ul{padding-bottom:12px}} /*ie6*/{_padding:2px ...
随机推荐
- responsiveslides 插件（图片轮播插件）
参数详解: $(".rslides").responsiveSlides({ auto: true, // Boolean: 设置是否自动播放, true or false spe ...
- sp_who, sp_who2和sp_who3
sp_who可以返回如下信息: (可选参数LoginName, 或active代表活动会话数)Spid (系统进程ID)status (进程状态)loginame (用户登 ...
- DS图遍历--广度优先搜索
题目描述 代码框架如下: 输入 第一行输入t,表示有t个测试实例 第二行输入n,表示第1个图有n个结点 第三行起,每行输入邻接矩阵的一行,以此类推输入n行 第i个结点与其他结点如果相连则为1,无连接则 ...
- C# 生成时间戳
编写网络程序中难免用到一些时间戳. 早前不知道哪里复制过一个代码,如下: public static string GetTimeStamp() { TimeSpan ts = DateTime.Ut ...
- 【maven】之使用import scope解决maven继承（单）问题
想必大家在做SpringBoot应用的时候,都会有如下代码: <parent> <groupId>org.springframework.boot</groupId> ...
- Java 线程转储 [转]
http://www.oschina.net/translate/java-thread-dump java线程转储 java的线程转储可以被定义为JVM中在某一个给定的时刻运行的所有线程的快照.一个 ...
- PAT 甲级 1011 World Cup Betting (20)（20 分）
1011 World Cup Betting (20)(20 分)提问 With the 2010 FIFA World Cup running, football fans the world ov ...
- [转][xml]SQL转义
SQL语句包含">"和"<"时,在PL/SQL中可以正常运行,但是放在XML中,编译报错,这是因为在XML文档中的所有文本都会被解析器解析,文本内容 ...
- [转][C#]WebAPI 必需 Dll
- Scrapy学习篇（五）之Spiders
Spiders Spider类定义了如何爬取某个网站.包括了爬取的动作(例如:是否跟进链接)以及如何从网页的内容中提取结构化数据(爬取item).简而言之,Spider就是你定义爬取的动作及分析某个网 ...