低版本浏览器提示升级

最新推荐文章于 2021-06-08 19:35:04 发布

New Learning

最新推荐文章于 2021-06-08 19:35:04 发布

阅读量1.1k

点赞数

分类专栏：前端代码

本文链接：https://blog.csdn.net/cheeso/article/details/78435820

版权

前端代码专栏收录该内容

32 篇文章 1 订阅

订阅专栏

<!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>