zoukankan      html  css  js  c++  java
  • 开源中国-浏览器不支持提示页面

    <style>
        .ie_dialog {
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #FAFAFA !important;
            display: none;
        }
    .ie_dialog table{
        margin: 100px auto;
    }
        .ie_notice .logo_osc {
            display: block;
            margin: 0 auto;
            padding-bottom: 24px;
        }
    
        .ie_notice h2, .ie_notice h4 {
            margin: 0;
            text-align: center;
        }
    
        .ie_notice .title {
            font-size: 28px;
            color: #4A4A4A;
        }
    
        .ie_notice .subtitle {
            font-size: 20px;
            color: #9B9B9B;
            font-weight: normal;
        }
    
        .ie_notice .ie_box {
            width: 560px;
            margin: 24px auto;
            background: #FFFFFF;
            border: 1px solid #E6E6E6;
            box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.10);
            border-radius: 4px;
            display: table !important;
        }
    
        .ie_notice .ie_box .desc {
            font-size: 14px;
            color: #6D6D6D;
            line-height: 22px;
            padding: 20px;
        }
    
        .ie_notice .ie_box a {
            display: inline-block;
            width: 30%;
            text-align: center;
        }
    
        .ie_notice .ie_box .go {
            width: 100%;
            background: #F6F6F6;
            font-size: 16px;
            color: #9B9B9B;
            padding: 16px 0;
            text-align: center;
            border: none;
            margin-top: 20px;
            text-decoration: none;
        }
    
        .ie_notice .ie_box a img {
            border: none;
        }
    </style>
    
    
    <div class="ie_dialog" id="incompatible_tip">
        <div>
            <br>
            <table class="ie_notice" style="border:0">
                <tr>
                    <td style="text-align: center;">
                        <img class="logo_osc" src="/img/ie/logo_osc.png"" alt="开源中国"/>
                    </td>
                </tr>
                <tr>
                    <td><h2 class="title">我们不支持 IE 10 及以下版本浏览器</h2></td>
                </tr>
                <tr>
                    <td><h4 class="subtitle">It appears you’re using an unsupported browser</h4></td>
                </tr>
                <tr>
                    <td>
                        <div class="ie_box">
                            <div class="desc">为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是
                                IE 11 或以上版本,请关闭“兼容性视图”。
                            </div>
                            <div class="logos">
                                <a href="http://www.google.cn/chrome/browser/desktop/index.html" target="_blank"
                                   title="下载Chrome浏览器">
                                    <img src="/img/ie/logo_chrome.png"/>
                                </a>
                                <a href="http://www.firefox.com.cn" target="_blank" title="下载Firefox浏览器">
                                    <img src="/img/ie/logo_firefox.png"/>
                                </a>
                                <a href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" target="_blank"
                                   title="升级IE浏览器">
                                    <img src="/img/ie/logo_ie.png"/>
                                </a>
                            </div>
                            <div>
                                <a href="javascript:void(0);"
                                   onclick="document.getElementById('incompatible_tip').style.cssText = 'display:none;';"
                                   class="go">继续访问</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    
    
    
    <script>
        var isIE = (function () {
            var browser = {};
            return function (ver, c) {
                var key = ver ? ( c ? "is" + c + "IE" + ver : "isIE" + ver ) : "isIE";
                var v = browser[key];
                if (typeof(v) != "undefined") {
                    return v;
                }
                if (!ver) {
                    v = (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0);
                } else {
                    var match = navigator.userAgent.match(/(?:MSIE |Trident/.*; rv:|Edge/)(d+)/);
                    if (match) {
                        var v1 = parseInt(match[1]);
                        v = c ? ( c == 'lt' ? v1 < ver : ( c == 'gt' ? v1 > ver : undefined ) ) : v1 == ver;
                    } else if (ver <= 9) {
                        var b = document.createElement('b')
                        var s = '<!--[if ' + (c ? c : '') + ' IE ' + ver + ']><i></i><![endif]-->';
                        b.innerHTML = s;
                        v = b.getElementsByTagName('i').length === 1;
                    } else {
                        v = undefined;
                    }
                }
                browser[key] = v;
                return v;
            };
        }());
    
            if (isIE(9, 'lt')) {
            console.log("fvck ie");
                    document.getElementById('incompatible_tip').style.cssText = 'display:block;';
        }
    
    </script>
  • 相关阅读:
    番外篇 之 JS调用
    C# 匿名方法及Lambda表达式
    番外篇 之 C#委托
    番外篇之多线程
    23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
    22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容
    AccessHelper类
    WPF视频教程系列笔记
    《深入浅出WPF》 学习笔记
    基于MAVEN构建Spring MVC初始化配置
  • 原文地址:https://www.cnblogs.com/zhaoyihao/p/7703824.html
Copyright © 2011-2022 走看看