解决IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法,解决后支持HTML5

JSON 2016-08-22 14:47:25 8435

本站使用的Bootstarp 3.x ,一直就不支持非 HTML5  的浏览器,也就是不在非HTML5浏览器下,显示是不友好的,之前一直没空解决,看着挺恶心的,今天我把他改版支持 IE  浏览器,故发布了:解决IE6 IE7 IE8 IE9 IE10 IE11支持 Bootstrap  的解决方法。

首先这些资料摘自网络上的各个作者的文章,下面可能会列举参照的网址。

一、引入依赖的Javascript。

http://open.sojson.com/common/html5/html5shiv.js
http://open.sojson.com/common/html5/respond.min.js

这2个Javascript 是在本站开放CDN 上,您可以复制地址直接使用,安全和稳定性不用担心。如果担心的,本博客下附件可以下载,另外要引用 Jquery 

http://open.sojson.com/common/jquery/jquery1.8.3.min.js

本人比较中意这个版本,v1.8.3 JQuery 

二、增加meta头部信息。

我的建议是添加以下2个即可。

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

bootstrap 不支持IE兼容模式,为了让 IE  浏览器运行最新的渲染模式,将添加以上标签在页面中,IE=edge 表示强制使用 IE  最新内核,chrome=1 表示如果安装了针对IE6/7/8 等版本的浏览器插件Google Chrome Frame (可以让用户的浏览器外观依然是IE的菜单和界面,但用户在浏览网页时,实际上使用的是 Chrome  浏览器内核),那么就用 Chrome  内核来渲染。关于此meta 标签的具体说明,可参见StackOverflow上的精彩回答,<meta> 标签高人的英文解释可以参看http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e

——摘自:http://blog.csdn.net/chenhongwu666/article/details/41513901/

三、本站就是这么解决的。具体添加的代码如下。

<!--[if lte IE 9]>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<script src="${cdn}/js/common/html5/html5shiv.js"></script>
	<script src="${cdn}/js/common/html5/respond.min.js"></script>
	<script src="${cdn}/js/common/html5/jquery.placeholder.min.js"></script>
	
	<script>
		so(function(){
			//再次判断是否支持HTML5
			var i = document.createElement("input");
            i.setAttribute("type", "range");//因为非HTML5浏览器不支持range属性。
            if (i.type == "text" && location.href.search('infoHtml5.html') ===-1) {
	            layer.open({
				  title: '系统提示',
				  content: '经系统检测,您的浏览器不支持HTML5。<br>为了更好的服务,建议你更换浏览器。<br>再使用 www.sojson.com 在线工具。',
				  btn:['继续使用','详细说明'],
				  yes: function(index, layero){
				    layer.msg('有的功能不能正常使用哦。');
				  }
				});  
				$('.layui-layer-btn1').on('click',function(){
					 location.href="https://www.sojson.com/infoHtml5.html"
				});   
            }
            $('input, textarea').placeholder();
		});
	</script>
<![endif]-->

判断小于IE9 才添加这些代码。

四、解决HTML5 placeholder属性问题。

首先引入一个 JQuery  提供的 Javascript 

http://open.sojson.com/common/html5/jquery.placeholder.min.js

你可以直接使用,或者下载附件。

引入后,再加入初始化事件。

$(function(){
	 //解决IE浏览器placeholder问题
	 $('input, textarea').placeholder();
});

其实上面的代码里有。最好是判断下是 IE浏览器  下才执行。参考第三点的代码部分。


版权所属:SO JSON在线解析

原文地址:https://www.sojson.com/blog/160.html

转载时必须以链接形式注明原始出处及本声明。


附件下载:

备注:点击文件名下载,附件源来自云端,只能在本站下载。复制下载链接无效。

本文主题:

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

关于作者
一个低调而闷骚的男人。
相关文章
解决IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap解决方法解决支持HTML5
IE浏览器判断,判断IE版本的HTML语句详解,如:[if lte IE 9]……[endif]
IE、Firefox对同一域名访问并发限制,及解决优化方案
Shiro 教程,关于最近反应的相关异常问题,解决方法合集。
js html5 canvas制作多个小球碰撞的动画效果
Spring 3.x 升级到Spring 4.x 注意事项和步骤,错误解决方法
MySQL数据库为用户设置密码,Mysql修改密码。Mysql忘记密码解决方法
Macbook teamviewer 突破5分钟,苹果电脑重置 Mac 地址,100%解决限制
sojson 特效,本站页面“线条”HTML5实现讲解、特效代码下载
N多系统单点登录,实现、解决方案。四种解决方案
最新文章
Flink 在又拍云日志批处理中的实践 8580
个推异常值检测和实战应用-又拍云 1705
TCP 和 UDP协议详细讲解,优缺点分析讲解 8055
URL中乱七八糟的字符讲解,来源以及如何解决 5184
HTTP/3 来了,您真的了解它么? 6221
技术选型:为什么批处理我们却选择了Flink 2359
这些表情包你有吗?一起来 Battle 啊 3460
当我谈 HTTP 时,我谈些什么? 11782
新浪短链(t.cn)最新申请官方API的方法讲解。 72718
QUIC / HTTP3 协议详细分析讲解 10571
最热文章
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 653470
最新MyEclipse8.5注册码,有效期到2020年 (已经更新) 603231
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 496019
Jackson 时间格式化,时间注解 @JsonFormat 用法、时差问题说明 492966
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 492902
Elasticsearch教程(四) elasticsearch head 插件安装和使用 452127
免费天气API,天气JSON API,不限次数获取十五天的天气预报 260196
Java 信任所有SSL证书,HTTPS请求抛错,忽略证书请求完美解决 229867
谈谈斐讯路由器劫持,你用斐讯路由器,你需要知道的事情 203369
Elasticsearch教程(一),全程直播(小白级别) 192743
支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

查看我的收藏

正在加载... ...