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

你的名字 2021-09-20 11:58 324阅读 0赞

### 前言： ###

由于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是链接服务器字体的一种方式，**开发人员可以使用用户计算机之外的字体，只需要将喜欢的字体下载后包含再网站中，它会自动下载给需要的用户 。使用如下：

**   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不起作用的问题。**

**使用：**

**GitHub下载： ** [https://github.com/aFarkas/html5shiv/releases][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][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][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/][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_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_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/][https_www.zhangxinxu.com_wordpress_2010_05_csssandpaper-_E5_85_BC_E5_AE_B9ie_E7_9A_84css3-javascript_E5_BA_93]

[https_github.com_aFarkas_html5shiv_releases]: https://github.com/aFarkas/html5shiv/releases
[https_github.com_louisremi_background-size-polyfill_blob_gh-pages_backgroundsize.min.htc]: https://github.com/louisremi/background-size-polyfill/blob/gh-pages/backgroundsize.min.htc
[https_github.com_lc133_ie-css3.htc]: https://github.com/lc133/ie-css3.htc
[http_css3pie.com]: http://css3pie.com/
[https_www.zhangxinxu.com_wordpress_2010_05_csssandpaper-_E5_85_BC_E5_AE_B9ie_E7_9A_84css3-javascript_E5_BA_93]: 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://blog.csdn.net/enweitech/article/details/80802677