判断ie9以下的内核阻止访问内容。
<!doctype html>
<html>
<head>
<meta name="renderer" content="webkit">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Browser</title>
<style type="text/css">
img{border:none;}
a{
text-decoration: none;
}
#login {
display:none;
height:400px;
width: 500px;
position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
top:20%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
left:50%;
margin-left: -250px;
z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
background: white;
}
#over{
width: 100%;
height: 100%;
opacity:0.5;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/
filter:alpha(opacity=50);
display: none;
position:absolute;
top:0;
left:0;
z-index:1;
background: #000;
}
.limit-top{
padding: 50px 95px;
}
.limit-top img{
display: inline-block;
float: left;
}
.limit-top p{
margin:0 0 0 10px;
width:250px ;
float: left;
display: inline-block;
line-height: 25px;
}
.limit-bottom{
padding: 50px 95px;
}
.limit-bottom img{
margin: 0 15px;
}
</style>
</head>
<body>
<div id="login">
<div class="limit-top">
<img src="../images/limit-top.png" height="46" width="46"/>
<p>Hi,您当前的浏览器版本过低,可能存在安全风险,建议升级浏览器</p>
</div>
<div class="limit-bottom">
<a href="#">
<img src="../images/chrome.png" />
</a>
<a href="#">
<img src="../images/firefox.png"/>
</a>
</div>
</div>
<div id="over"></div>
</body>
<script type="text/javascript">
var login = document.getElementById('login');
var over = document.getElementById('over');
function show()
{
login.style.display = "block";
over.style.display = "block";
}
function hide()
{
login.style.display = "none";
over.style.display = "none";
}
if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<9){
show();
}
</script>
</html>