让HTML5, CSS3, Bootstrap3在虐心的IE8上爬模滚打

最新推荐文章于 2020-11-25 22:33:25 发布

Dobility

最新推荐文章于 2020-11-25 22:33:25 发布

阅读量759

点赞数

分类专栏：前端文章标签：前端开发 html5 bootstrap ie 8 css3

本文链接：https://blog.csdn.net/Dobility/article/details/51765215

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

HTML5 和 CSS3 推出已经很久了，然而在它推出之前，早就有 IE 的存在，所以不可避免地发生 IE8 及其更早版本不支持 H5 新标签新特性和 CSS3 新内容这样的尴尬局面，而且还存在着对 JavaScript 的兼容问题……

　　虽然微软已经对 IE 弃疗，转向 Edge 的开发，但从市场份额上看，显然我国的网民还没放手 IE，仍然有很多人在使用 IE8 及其更早的版本（因为 win7 系统默认装 IE8）。不管别人有没有使用它，在网站前端开发的时候依然需要注意对 IE 的适应。

　　现在的前端开发潮流是适应性布局，而有 Twitter 推出的 Bootstrap 是一款非常流行和好用的框架。现在开发版本已经到了 4.0 了，通行版的主要是 3。然而，市场上有那么多的 IE 旧版本，它们不支持 @media，因此 Bootstrap 的适应性布局就这么狗带了...

　　这是我在开发前端适应性网页的时候，找到的解决方法。

　　1）使用 html5.js 或 html5shiv.js 让 IE 能读懂 h5，html5.js下载地址：http://download.csdn.net/detail/fengzhu1234/7679099

　　2）使用 respond.js 或 respond.min.js 让 IE 能明白 @media，respond.js下载地址：http://download.csdn.net/detail/liusensen00/8170563

　　3）使用 ie7.js、ie8.js 或者 ie9.js 来解决 IE 的兼容性问题，ie9.js下载地址：http://download.csdn.net/download/sw6809172/7988419

　　当然，以上文件你也可以使用 CDN。

　　另外，因为 jQuery2.0 以后的版本不再考虑 IE8 及其以前的版本，而 Bootstrap 的 js 部分是基于 jQuery，所以

　　4）使用 jQuery1.x 版本

　　代码大概如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>适应性页面探究</title>
    <!--[if lt IE 9]>
    <script src="resource/respond.js"></script>
    <script src="resource/IE9.js"></script>
    <script src="resource/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="resource/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="resource/jquery-1.8.0.js"></script>
    <script src="resource/bootstrap.min.js"></script>
</head>

　　注意，

　　1）<meta name="viewport" content="width=device-width, initial-scale=1">这一行是配合 Bootstrap 移动设备优先的特性的，<meta http-equiv="X-UA-Compatible" content="IE=edge">是让 IE 默认以 Edge 来渲染（如果有 Edge 的话），这两句不可少。

　　2）<script src="resource/respond.js"></script>要在有 @media 的 css 文件引入之前，respond.js 越早引入越好，可以缓解闪屏问题

　　此外，还有一个东西：ie-css3.htc，这个文件能让 CSS3 的 box-shadow, border-radius 展现出来，使用它，你就可以不用写 filter 去模仿 box-shadow 了。它的使用非常方便：

.box { 
    -moz-border-radius: 15px; /* Firefox */ 
    -webkit-border-radius: 15px; /* Safari and Chrome */ 
    border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ 
    -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ 
    -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
    box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    behavior: url(ie-css3.htc);
}

　　•当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种，IE就会渲染。
　　•当使用了这个htc文件后，你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
　　•不支持RGBA值中的alpha透明度。
　　•不支持inset内阴影。
　　•不支持阴影扩展。
　　•阴影在IE中只会显示为黑色，不管你设置成其它什么颜色。

　　让HTML5, CSS3, Bootstrap3在虐心的IE8上爬模滚打，是每个适应性前端开发工作者的难题和责任... 一起加油！

Dobility

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让HTML5, CSS3, Bootstrap3在虐心的IE8上爬模滚打

HTML5 和 CSS3 推出已经很久了，然而在它推出之前，早就有 IE 的存在，所以不可避免地发生 IE8 及其更早版本不支持 H5 新标签新特性和 CSS3 新内容这样的尴尬局面，而且还存在着对 JavaScript 的兼容问题……　　虽然微软已经对 IE 弃疗，转向 Edge 的开发，但从市场份额上看，显然我国的网民还没放手 IE，仍然有很多人在使用 IE8 及其更早的版本（因为 win
复制链接

扫一扫