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

soゝso 2016-08-22 14:47:25 3571
分享到:

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


关于作者
目前就职于国内某电商平台公司打杂。。
相关文章
IE浏览器判断,判断IE版本的HTML语句详解,如:[if lte IE 9]……[endif]
IE、Firefox对同一域名访问并发限制,及解决优化方案
Spring 3.x 升级到Spring 4.x 注意事项和步骤,错误解决方法
Shiro 教程,关于最近反应的相关异常问题,解决方法合集。
N多系统单点登录,实现、解决方案。四种解决方案
sojson 特效,本站页面“线条”HTML5实现讲解、特效代码下载
Websocket(一)~ Spring Websocket Session共享解决思路
MySQL数据库为用户设置密码,Mysql修改密码。Mysql忘记密码解决方法
js html5 canvas制作多个小球碰撞的动画效果
Java 信任所有SSL证书,HTTPS请求抛错,忽略证书请求完美解决
最新文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 39153
SOJSON 使用又拍云 CDN 整体架构,解决百度 SEO 方案 33
又拍云(Upyun)刷新CDN,云存储缓存 —JavaAPI 20
JS解密,JavaScript 解密,任何JS加密都能100%解密,以及JS 加密讲解 83
阿里云DNS 解析讲解,SEO配置搜索引擎线路解析 45
百度秒收录教程,怎么做到百度秒收入你的页面,SEO 教程 101
CDN 请求返回 connection reset by peer,被拦截请求解决方案 37
Google AdSense 申请技巧,谷歌广告申请通不过教程 69
Mac 安装 JMeter,JMeter 下载,JMeter Http 压力测试【图解】 51
支付宝吱口令自动复制脚本,自动复制 JavaScript 代码介绍 916
最热文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 39097
Elasticsearch教程(四) elasticsearch head 插件安装和使用 109124
Elasticsearch教程(六) elasticsearch Client创建 73308
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 70761
Elasticsearch教程(二),IK分词器安装 67505
Elasticsearch教程(三),IK分词器安装 (极速版) 54092
Elasticsearch教程(五) elasticsearch Mapping的创建 51628
Elasticsearch教程(一),全程直播(小白级别) 51390
Elasticsearch教程(七) elasticsearch Insert 插入数据(Java) 47779
Elasticsearch权威指南-中文.pdf,Elasticsearch 中文文档下载 40948

骚码加入我们 / 千人QQ群:259217951

入群需要5元,如果没有QQ钱包,可以先Alipay、微信,赞助然后加群主拉进。

二维码生成 来自 >> 二维码生成器

支付扫码

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

正在加载... ...