关于常见IE兼容插件的研究

1、html5shiv.js html5.js

适用浏览器：IE 6 7 8 

目的：让低版本IE浏览器（678）支持html5新增的标签

使用方法：

<!--[if lt IE 9]>
<script src="dist/html5shiv.min.js"></script>
<![endif]-->

尽量使用压缩过的js，在body标签之前加载

原理：

使用createElement方法，这包含document.createElement和document.createDocumentFragment，对当前页面的HTML5元素进行动态的调整，并且为这些元素提供最基本的样式。

html5新增的标签有哪些？

abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video

代码原理分析：

js

<!--[if lt IE9]> 
<script> 
   (function() {
     if (! 
     /*@cc_on!@*/
     0) return;
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
     var i= e.length;
     while (i--){
         document.createElement(e[i])
     } 
})() 
</script>
<![endif]-->

css

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

相当于调用浏览器的创建元素的功能，并把它设置为block

 2、respond.js

适用浏览器：IE 6 7 8 

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

WARNING: Respond.js doesn't work if you view the page via file:// 

即本地文件路径下查看，是不支持的

 3、ie-css3.htc

适用浏览器：IE 6 7 8 

目的：让IE 678 浏览器支持css3属性。包括：border-radius，box-shadow，text-shadow

使用方法：

 

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari 和 Chrome */
  border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

  behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
}

 

注意：.htc 文件路径是相对于html文件的路径，而不是相对于css文件。（相关研究↘）

简介：IE浏览器的behavior 属性是相对于HTML文档而言的，与CSS其他的属性不一样，不是相对于CSS文档而言的。

要想让IE浏览器支持htc文件，需要一个有着”text/x-component” 字样的content-type 头部，否则，会忽视behavior。

原理：.htc是个脚本文件，类似于js。但（貌似）只有ie认他。htc利用vml结合脚本画css3的特效。

备注：VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。是一种基于 XML 语法的语言。

代码原理分析：略

大神博客相关文章：http://www.zhangxinxu.com/wordpress/2010/04/让ie6ie7ie8浏览器支持css3属性/

让IE6/IE7/IE8支持CSS3的8种方法：http://blog.csdn.net/debugingstudy/article/details/11913497

 

 

 

------------------格式

 n、name.js

适用浏览器：

目的：

使用方法：

原理：

代码原理分析：

 

------------------ps，看看就得了，这年头谁还去兼容ie678啊，ie10都被微软强制弹窗升级ie11了。ie11都被微软放弃开发去搞edge了。有病啊，研究这个。真闲的蛋疼，为edge多多做做优化帮助微软快速翻身干掉ie比这个强