让IE6\7\8支持Html5和CSS3的各类JS和Htc归纳（html5shiv.js、respond.js、background-size.htc、ie-css3.htc、pie.htc等）

前言：

由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，解决方案就有下面两个：
1. 为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，这样的维护成本比较高，也失去响应式设计的意义。
2. 使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）。

 

下面先概述回顾一下H5和Css3，再尝试对一些为实现 Html5 和 Css3 兼容性的JS进行归纳。

 

 

一、html5回顾：

 

1、H5介绍

HTML5 是最新的 HTML 标准。 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 拥有新的语义、图形以及多媒体元素。

HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

 

2、新特性：

新的语义元素，比如 <header>, <footer>, <article>, and <section>。

新的表单控件，比如 calendar、date、time、email、url、search。

强大的图像支持（借由 <canvas> 和 <svg>）

强大的多媒体支持（借由 <video> 和 <audio>）

强大的新 API，比如用本地存储取代 cookie。

 

3、注意事项：

HTML5 中默认的字符编码是 UTF-8。

所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。

项目中尽量使用小写文件名：大多数 web 服务器（Apache、Unix）对文件名的大小写敏感，其他 web 服务器（微软，IIS）对大小写不敏感。

HTML 文件名应该使用扩展名 .html（而不是 .htm），html中的内联视频尽量不要自动播放。

 

 

二、CSS3回顾：

 

1、CSS3介绍

CSS3 是最新的 CSS 标准。

对CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。较小的模块化较利于规范及时调整、更新和发布，同时不同浏览器厂商可以有选择的支持一部分模块，这样有利于CSS3的推广。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂 。

 

2、CSS3新特性

 

   2.1、边框特性

CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义 。

 

 

   2.2、多背景图

CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题，帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计，简化了背景图片的维护成本 。

 

   2.3、颜色与透明度

CSS3颜色模块的引入，实现了制作Web效果时不再局限于RGB和十六进制两种模式。CSS3增加了HSL、HSLA、RGBA几种新的颜色模式。这几种颜色模式的提出，在做开发的时候不仅可以设置元素的色彩，还能根据需要轻松地设定rgba元素透明度 。

 

   2.4、多列布局与弹性盒模型布局

flex box弹性盒子，CSS3多列布局属性可以不使用多个div标签就能实现多列布局。CSS3中的多列布局模块描述了如何像报纸、杂志那样，把一个简单的区块拆成多列，并通过相应属性来实现列数、列宽、各列之间的空白间距。弹性盒模型布局方便了Web前端开发者根据复杂的前端分辨率进行弹性布局，轻松地实现页面中的某一区块在水平、垂直方向对齐，是进行响应式网站开发的一大利器 。

 

   2.5、盒子的变形

在CSS2.1中，想让某个元素变形必须要借助JavaScript写大量的代码实现，在CSS3中加入了变形属性，该属性在2D或3D空间里操作盒子的位置和形状，来实现例如旋转、扭曲、缩放或者移位。变形属性的出现，使Web前端中的元素展示不仅仅局限在二维空间，Web前端开发者可以通过旋转、扭曲、缩放或者移位等操作实现元素在三维控件上的展示。通过变形元素，web前端中的内容展示更加形象、真实 。

 

  2.6、过渡与动画

CSS3的"过渡"(transition)属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。CSS3的"动画"(animation)属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何flash或JavaScript脚本代码。过渡与动画的出现，使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示，而是通过简单的方法使页面元素动了起来，实现了元素从静到动的变化 。

 

   2.7、Web字体

CSS3中引入了@font-face，@font-face是链接服务器字体的一种方式，开发人员可以使用用户计算机之外的字体，只需要将喜欢的字体下载后包含再网站中，它会自动下载给需要的用户 。使用如下：

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>

 

   2.8、媒体查询

CSS3中引入媒体查询(mediaqueries)，可为不同分辨率的设备定义不同的样式。比如，在可视区域小于480像素时，可能想让原来在右侧的网站侧栏显示在主内容的下边，以往必须通过JavaScript判断用户浏览器的分辨率，然后再通过JavaScript修改CSS。CSS3中只需要通过媒体查询就可实现上述操作 。

 

   2.9、阴影

阴影主要分为两种:文本阴影(text-shadow)和盒子阴影(box-shadow)。文本阴影在CSS2中已经存在，但没有得到广泛的运用(CSS2.1中删除了)。CSS3延续了这个特性，并进行了新的定义，该属性提供了一种新的跨浏览器解决方案，使文本看起来更加醒目。CSS3中的盒子阴影的引入，可轻易地为任何元素添加盒子阴影 

 

 

 

3、CSS3兼容性和其它

浏览器厂商以前就一直在实施CSS3，虽然它还未成为真正的标准，但却提供了针对浏览器的前缀:

 

   Chrome(谷歌浏览器):-webkit-

   Safari(苹果浏览器):-webkit-

   Firefox(火狐浏览器):-moz-

   lE(IE浏览器):-ms-

   Opera(欧鹏浏览器):-0-

 

例如，CSS3渐变样式在Firefox和Safari中是不同的。Firefox使用-moz-linear-gradient，而Safari使用-webkit-gradient，这两种语法都使用了厂商类型的前缀。

需要注意的是，在使用有厂商前缀的样式时，也应该使用无前缀的。这样可以保证当浏览器移除了前缀，使用标准CSS3规范时，样式仍然有效。

 

 

 

三、实现 Html5 和 Css3 兼容性的JS进行归纳如下：

 

1、html5shiv.js：

解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。

 

使用：

<!--[if lt IE 9]>
<script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->

GitHub下载：  https://github.com/aFarkas/html5shiv/releases

 

 

2、respond.js: 

Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）。

使用：

<!--[if lt IE 9]>

　　<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>

<![endif]—>

注意事项：

1.1、由于浏览器的安全规则问题，Respond.js 不能通过 file:// 协议（打开本地HTML文件所用的协议）访问的页面上发挥正常的功能。如果需要测试IE8下面的Respond.js 响应式特性，必须用http服务器（例如apache、nginx）托管HTML页面才可以。

1.2、Respond.js 不支持通过 @import 引入的CSS文件。例如，Drupal 一般被配置为通过 @import 引入CSS文件，Respond.js对其将无法起到作用。 

1.3、IE8不能完全支持box-sizing: border-box;与min-width、max-width、min-height或max-height一同使用。由于此原因，从Bootstrap v3.0.1版本开始，我们不再为.container使用max-width。

1.4、另一种让ie8及以下支持css3媒体查询的css3-mediaqueries.js 像上面引入也可，但是会出现闪屏 不是特别推荐使用， 上面是最常用的

 

GitHub下载：https://github.com/scottjehl/Respond

 

 

 

3、background-size-polyfill.htc :  

使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。

使用如下：

.selector { 
    background-size: cover; 
    behavior: url(/backgroundsize.min.htc); 
    -ms-behavior: url(/backgroundsize.min.htc); 
}

 

也可以通过滤镜filter实现，如下

body {
    background: url() no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='', sizingMethod='scale');
    -ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='', sizingMethod='scale');
}

 

但是使用滤镜filter实现IE8下的background-size 属性效果时 ，局限性如下：

引用图片不能透明的，否则会出现双层图片的效果；

不能指定任意大小background百分比，可用cover；

用于单张图片不能使用图片精灵等拼图；

要引用绝对路径图片，

 

GitHub下载：https://github.com/louisremi/background-size-polyfill/blob/gh-pages/backgroundsize.min.htc

 

 

 

4、Normalize.css

不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。当然，也可以使用 reset.css

使用normalize.css有下几个优点：

• 保护有用的浏览器默认样式而不是完全去掉它们
• 一般化的样式：为大部分HTML元素提供
• 修复浏览器自身的bug并保证各浏览器的一致性
• 优化CSS可用性：用一些小技巧
• 解释代码：用注释和详细的文档来

下载链接：https://pan.baidu.com/s/1Yrv743iwuRZ7XmzZYknFxg    提取码：hevm 
 

 

5、ie-css3.htc: 

是一个可以让IE低版本（如IE6/7/8）浏览器支持部份CSS3属性的htc文件，比如盒阴影box-shadow、圆角属性border-radius、文字阴影属性text-shadow 。

实现原理：VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言，由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的。可以理解为：VML是IE浏览器的御用画笔，专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了，正好可以就此实现一些IE不支持的CSS3效果。

使用步骤：样式中增加 behavior: url(项目绝对路径ie-css3.htc);类似background-size-polyfill.htc的使用

 

注意事项：

 当前元素一定要有定位属性，position:relative或position:absolute。 z-index值一定要比周围元素的要高；

http协议访问 ；

原生IE浏览器访问，兼容模式显示可能没效果。

支持样式： border-radius 只设置一个角落的圆角属性时无效；

box-shadow 只支持#(000）黑色阴影；

text-shadow IE下样式表现与Firefox/Safari/Chrome存在差异。

 

GitHub下载：https://github.com/lc133/ie-css3.htc

 

 

 

5、pie.htc : 

用CSS的behavior行为，可以调用此文件，然后让IE6\7\8也能实现一些常见的CSS3效果，如圆角(border-radius)，盒阴影(box-shadow)，背景渐变(gradient)，多图片背景(multiple background images)、透明度(rgba)。

 

使用如下实现线性渐变：

.demo{
    height: 100px ;
    width:200px;
    background:linear-gradient(90deg,#00FFFF,#0000FF);
    -pie-background:linear-gradient(0,#00FFFF,#0000FF);
    behavior: url(static_resources/PIE.htc);
}

实现原理上类似ie-css.htc：IE下这些CSS3效果实现是借助于VML，由VML绘制圆角或是投影效果的容器元素，然后这个容器元素作为目标元素的后兄弟节点插入，如果目标元素position:absolute 或是 position:relative，则这个css3-container元素将会设置与之一样的z-index值，在DOM tree中，同级的元素总是后面的覆盖前面的，所以这样就会覆盖。解决方式是设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值（不可为-1）；

 

注意事项：

border-image(IE6/7/8只会以stretch的形式进行填充，即使border-image-repeat属性是repeat和round)；

使用绝对路径；

PIE不支持border-top-left-radius表示左上圆角的缩写方式；

在服务器上提供 htc文件的MIME 配置类型

 

           官方下载：http://css3pie.com/

 

 

 

6、cssSandpaper库：

cssSandpaper是一个CSS3的JavaScript库，使用特定的CSS书写规则可以让页面元素支持CSS3的一些特性，例如，旋转，拉伸，盒阴影，渐变等效果，包括IE浏览器。由于cssSandpaper实现IE下的CSS3效果全部都是使用的filter滤镜实现的，所以其中就有不少局限性，例如IE中没有支持圆角的滤镜，所有cssSandpaper无法实现圆角效果，同样的原因，IE浏览器下box-shadow没有模糊过渡，不支持径向渐变等。然而，还是可以实现不少炫酷的效果的。

一旦调用了cssSandpaper CSS3 JavaScript库文件后，实现CSS3效果的调用也比较特别，需要使用特定的前缀样式写法，而且很重要的是cssSandpaper支持JavaScript，也就是说，可以通过js设置，动态改变各个浏览器（包括IE）CSS3表现，这往往可以用来实现一些精湛的UI表现。

下载及使用参考：https://www.zhangxinxu.com/wordpress/2010/05/csssandpaper-%E5%85%BC%E5%AE%B9ie%E7%9A%84css3-javascript%E5%BA%93/

 

 

 

 

参考网址：

https://blog.csdn.net/enweitech/article/details/80802677

https://www.zhangxinxu.com/wordpress/2010/05/csssandpaper-%E5%85%BC%E5%AE%B9ie%E7%9A%84css3-javascript%E5%BA%93/