一般想做一些酷炫的网站都有个烦恼,那就是兼容ie浏览器,好在现在使用ie的也越来越少,微软也转战edge浏览器。

使用 Bootstrap经常用js插件可以模拟兼容旧版本的浏览器(bsie 鄙视IE),而且经常可以看到如下的代码:

    <!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

不过,个人还是倾向于提示用户升级浏览器,而不是为了兼容老版浏览器,而煞费苦心的调试,累。。。

一般喜欢用上面的代码,嵌入一个div提示用户升级浏览器,说实话也不喜欢,这方式还得挨个改模板。下面提供一种直接一段JS 放在页面或js文件里就可以实现提示:

(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){var d=document.createElement("div");d.className="browsehappy";d.innerHTML='<div style="width:100%;height:100px;font-size:20px;line-height:100px;text-align:center;background-color:#E90D24;color:#fff;margin-bottom:40px;">\u4f60\u7684\u6d4f\u89c8\u5668\u5b9e\u5728<strong>\u592a\u592a\u65e7\u4e86</strong>\uff0c\u592a\u592a\u65e7\u4e86 <a target="_blank" href="http://browsehappy.osfipin.com/" style="background-color:#31b0d5;border-color: #269abc;text-decoration: none;padding: 6px 12px;background-image: none;border: 1px solid transparent;border-radius: 4px;color:#FFEB3B;">\u7acb\u5373\u5347\u7ea7</a></div>';var f=function(){var s=document.getElementsByTagName("body")[0];if("undefined"==typeof(s)){setTimeout(f,10)}else{s.insertBefore(d,s.firstChild)}};f()}}(window));

最终效果如下:

此段代码针对于ie6 ie7 ie8 ie9都有提示。这种是比较简单的提示方式,样式相对比较丑。

===划重点===

可以到下面的网站里查看更多的提示样式,根据自己的情况定义:

了解更多:快乐浏览:浏览器升级提示

提示用户升级浏览器代码 低于ie9的浏览器提示的更多相关文章

  1. 提示用户升级IE6浏览器的办法

    IE6一直饱受设计者们的诟病,互联网风云变幻十多年,唯一没变的就是这款在当初被微软内置在winxp系统而又火的不行的浏览器.而如今,在日新月异的网络环境下,IE6却让一个原本美观整洁的网页变得满目疮痍 ...

  2. iOS - 提示用户升级版本并跳转到AppStore

    一.问题:自己做提示用户升级? 由于苹果做了自动升级,所有只要在应用程序中出现从AppStore检查版本更新,或者出现任何有关升级的提醒都会被拒,但是如果必须添加升级提示的话,可以配合后台通过添加AP ...

  3. ie9以下提示用户升级浏览器

    <!--[if lt IE 9]> <div style='border: 4px solid #FFF500; background: #FDFDC8; text-align: c ...

  4. LODOP打印控件如何提示用户升级下载安装新版本

    Lodop.C-Lodop在不断完善功能和更新中,新版本修复了很多问题,以及增加很多有利的功能,网站如何更新版本,提示用户下载新版本呢?更新版本很简单,只需要三步:1.替换提示安装部分的自己放置的路径 ...

  5. 浏览器在IE8 以下时显示提示信息,提示用户升级浏览器

    <!--[if lt IE 8]> <div style="background: #eeeeee;border-bottom: 1px solid #cccccc;col ...

  6. 在javascript中的浏览器兼容问题以及兼容浏览器汇总(默认事件,阻止冒泡,事件监听。。。)以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

  7. JavaWeb文件下载,提示用户保存而不是让浏览器直接打开

    1.通过HttpServletResponse对象实现文件下载 服务端向客户端游览器发送文件时,如果是浏览器支持的文件类型,一般会默认使用浏览器打开,比如txt.jpg等,会直接在浏览器中显示,如果需 ...

  8. Nginx 配置下载附件让浏览器提示用户是否保存

    Nginx配置下载附件让浏览器提示用户是否保存   by:授客  QQ:1033553122   测试环境 nginx-1.10.0 问题描述: 前端页面,IE11浏览器下请求下载附件模板,针对xls ...

  9. Google浏览器提示用户要允许网站允许flash!

    开发的flash播放器,在谷歌浏览器上播放不了,需要提示用户手动开启允许网站运行flash: <script type="text/javascript"> if (w ...

随机推荐

  1. 对Maven、gradle、svn、spring 3.0 fragment、git的想法

    1.Maven Maven可以构建项目,采用pom方式配置主项目和其他需要引用的项目.同时可结合spring3.0的新特性web  fragment. 从现实出发,特别是对于管理不到位,程序员整体素质 ...

  2. 解决maven下载jar慢的问题(如何更换Maven下载源)

    修改 配置文件 maven 安装 路径 F:\apache-maven-3.3.9\conf 修改 settings.xml 在 <mirrors> <!-- mirror | Sp ...

  3. Linux命令【第一篇】

    1.创建一个目录/data 记忆方法:英文make directorys缩写后就是mkdir. 命令: mkdir /data 或 cd /;mkdir data #提示:使用分号可以在一行内分割两个 ...

  4. Spring MVC初始化参数绑定

    初始化参数绑定与类型转换很类似,初始化绑定时,主要是参数类型 ---单日期 在处理器类中配置绑定方法  使用@InitBinder注解 在这里首先注册一个用户编辑器 参数一为目标类型   proper ...

  5. oracle 存储过程

    来自:http://www.jb51.net/article/31805.htm Oracle存储过程基本语法 存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 I ...

  6. ReactNative入门 —— 动画篇(上)

    在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式. 我们来个简单的示例: var AwesomeProject ...

  7. 锤子OneStep及BigBang使用体验

    令人期待的Smartisan OS v3.1.2终于推送了,第一时间下载了更新.几乎花了半个小时才升级完毕,捧着还热乎的手机,赶忙体验一下传说中的两大杀器:OneStep以及BigBang. 先说On ...

  8. AWS的SysOps认证考试样题解析

    刚考过了AWS的developer认证,顺手做了一下SysOps的样题.以下是题目和答案. When working with Amazon RDS, by default AWS is respon ...

  9. MyBatis在insert插入操作时返回主键ID的配置

    在使用MyBatis做持久层时,insert语句默认是不返回记录的主键值,而是返回插入的记录条数:如果业务层需要得到记录的主键时,可以通过Mapper.XML配置的方式来完成这个功能. 在 INSER ...

  10. 浏览器怎么添加 Axure扩展程序

    步骤   本文以强大如斯的谷歌浏览器来说明,怎么查看Axure原型文件,怎么添加Axure RP扩展程序.Axure RP生成的原型文件,一般都是可以用浏览器打开的, 如:一般都有index.star ...