低版本 Internet Explorer 淘汰行动

青春..荒唐

浏览: 962003 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端积累
CSS，浏览器兼容

前端积累 CSS 浏览器兼容

【前言】

介绍个低版本 Internet Explorer 淘汰行动，这里我直接把源码放过来，想用的直接在文档里判断IE版本。然后重定向页面即可

【主体】

自2014年4月8日起，Microsoft 不再为 Windows XP 和 Internet Explorer 8 及以下版本提供相应支持和更新。如果你继续使用这些，你将可能受到病毒、间谍软件和其他恶意软件的攻击，无法确保个人信息的安全。请参阅 Microsoft 关于 Windows XP 支持已经结束的说明。

做法就是不再兼容IE8及以下版本，当使用 Internet Explorer 过期版本（IE6、IE7、IE8 或使用该内核的浏览器）的用户访问时提示浏览器升级。

把这段代码添加在网站头部代码</head>之前，当IE8及以下版本浏览器（包括使用IE8及以下版本内核的浏览器）访问网站的时候将自动跳转到浏览器升级提示页面。

代码：

<!--[if lte IE 8]><script>window.location.href='./alert.html';</script><![endif]-->

ie.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>请升级你的浏览器</title>
    <link rel="shortcut icon" href="../static/imgs/author.jpg"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <base target="_blank"/>
    <style type="text/css">
        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
            margin: 0;
            padding: 0
        }

        a {
            text-decoration: none;
            color: #0072c6;
        }

        a:hover {
            text-decoration: none;
            color: #004d8c;
        }

        body {
            width: 960px;
            margin: 0 auto;
            padding: 10px;
            font-size: 13px;
            line-height: 20px;
            color: #454545;
            font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', DengXian, SimSun, 'Segoe UI', Tahoma, Helvetica, sans-serif;
        }

        h1 {
            font-size: 40px;
            line-height: 80px;
            font-weight: 200;
            margin-bottom: 10px;
        }

        h2 {
            font-size: 20px;
            line-height: 25px;
            font-weight: 500;
            margin: 10px 0;
        }

        p {
            margin-bottom: 10px;
        }

        .line {
            clear: both;
            width: 100%;
            height: 1px;
            overflow: hidden;
            line-height: 1px;
            border-bottom: 1px solid #ccc;
            margin: 10px 0 30px;
        }

        img {
            width: 34px;
            height: 34px;
            border: 0;
            float: left;
            margin-right: 10px;
        }

        span {
            display: block;
            font-size: 12px;
            line-height: 12px;
        }

        .clean {
            clear: both;
        }

        .browser {
            padding: 10px 0;
        }

        center a {
            color: white;
        }

        .browser li {
            width: 180px;
            float: left;
            list-style: none;
        }

        .browser .new {
            background: url(http://www.zuifengyun.com/images/new.png);
            width: 23px;
            height: 9px;
            display: inline-block;
        }
    </style>
</head>
<body>
<h1>是时候升级你的浏览器了</h1>
<p>你正在使用 Internet Explorer 的过期版本（IE6、IE7等内核的浏览器或使用chrome的兼容模式）。这意味着在升级浏览器前，你将无法访问此网站。</p>
<div class="line"></div>
<h2>请注意：Windows XP 及 IE6、IE7的支持已经结束</h2>
<p>自 2014 年 4 月 8 日起，Microsoft 不再为 Windows XP 和 Internet Explorer 8
    及以下版本提供相应支持和更新。如果你继续使用这些，你将可能受到病毒、间谍软件和其他恶意软件的攻击，无法确保个人信息的安全。请参阅 <a
            href="http://windows.microsoft.com/zh-cn/windows/end-support-help">Microsoft 关于 Windows XP 支持已经结束的说明</a> 。
</p>
<div class="line"></div>
<h2>更先进的浏览器</h2>
<p>推荐使用以下浏览器的最新版本。如果你的电脑已有以下浏览器的最新版本则直接使用该浏览器访问<b id="referrer"></b>即可。</p>
<ul class="browser">
    <li><a href="http://dlsw.baidu.com/sw-search-sp/soft/9d/14744/ChromeStandaloneSetup.1408587465.exe"><img
            src="http://www.zuifengyun.com/images/chrome.jpg" alt="谷歌浏览器" width="34" height="34"/> 谷歌浏览器<span>Google Chrome</span></a>
    </li>
    <li><a href="http://download.firefox.com.cn/releases/stub/official/zh-CN/Firefox-latest.exe"><img
            src="http://www.zuifengyun.com/images/firefox.jpg" alt="火狐浏览器" width="34" height="34"/> 火狐浏览器<span>Mozilla Firefox</span></a>
    </li>
    <li><a href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie"><img
            src="http://www.zuifengyun.com/images/ie.jpg" alt="IE浏览器" width="34" height="34"/> IE浏览器<span>Internet Explorer</span></a>
    </li>
    <li><a href="http://dl.client.baidu.com/union/getbdbrowser.php?tn=newbdie"><img
            src="http://www.zuifengyun.com/images/baiduchrome.png" alt="百度浏览器" width="34" height="34"/> 百度浏览器 <span
            class="new"></span> <span>Baidu Explorer</span></a></li>
    <div class="clean"></div>
</ul>
<div class="line"></div>
<h2>为什么会出现这个页面？</h2>
<p>如果你不知道升级浏览器是什么意思，请请教一些熟练电脑操作的朋友。如果你使用的不是IE6/7，而是360浏览器、QQ浏览器、搜狗浏览器等，出现这个页面是因为你使用的不是该浏览器的最新版本，升级至最新即可。</p>
<div class="line"></div>
<h2>一起抵制IE6、IE7</h2>
<p>
    为了兼容这个曾经的浏览器霸主，网页设计人员需要做大量的代码工作，而且最终效果也始终不能让人满意。对于普通用户而言，低版本IE更是一个岌岌可危的安全隐患，在Windows历史上几次大的木马病毒事件都是利用IE漏洞进行传播。所以，请和我们一起抵制IE6、IE7！<a
        href="http://www.zuifengyun.com/kill-old-ie.html">如何添加IE浏览器升级提示？</a></p>
<center>
    <script>// <![CDATA[
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F13057e83f4c6d417a6123ba4de0ee2b6' type='text/javascript'%3E%3C/script%3E"));
    // ]]></script>
    <center>
</body>
</html>

网站在没有兼容的低版本IE中往往都是错版，所以检测到是低版本IE时直接跳转到升级页面，节省了不必要的资源加载，降低了网站服务器开销。去除冗余字符之后，便有了这段简洁优雅的代码。

为了兼容这个曾经的浏览器霸主，网页设计人员需要做大量的代码工作，而且最终效果也始终不能让人满意。对于普通用户而言，低版本IE更是一个岌岌可危的安全隐患，在Windows历史上几次大的木马病毒事件都是利用IE漏洞进行传播。所以，请和我们一起抵制IE6、IE7、IE8！

自2014年4月到现在短短几个月时间里，已有众多童鞋主动加入这个行列，每天为数以千计的低版本IE用户提示升级，现在醉风云呼吁更多的人加进来，一起抵制低版本IE！

分享到：

二级导航栏闪烁问题 | 404倒计时返回上一页

2018-04-13 16:55
浏览 1643
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论