解决IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法,解决后支持HTML5
本站使用的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
转载时必须以链接形式注明原始出处及本声明。
如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。