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

信息发布:soゝso 发布日期:2016-08-22 14:47 热度:629 分享到:

本站使用的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="http://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浏览器  下才执行。参考第三点的代码部分。


附件下载

html5 解决的3个JS包.zip

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

本文主题

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

¥我需要走的更远,点击我 赞助。 如果还有疑问,点击我加群,为你提供最好的解答。


工具导航地图

 
Nodejs + socket Demo 赞助二维码 赞助名单 百度口碑点赞 查看QQ群美女帅哥 点击加QQ群 听音乐 开启弹幕 X
反馈意见