低版本IE兼容 H5+CSS3 方案

【主要是针对ie6 7 8对支持和让老浏览器支持html5+css3的一些js脚本】

html5shiv.js

// 让IE8及耕地版本的IE识别section,article,nav等html5元素

cdn地址:

<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>

注意:都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

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

但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的"白板"网页,我们该怎么解决呢?

我们可以参照facebook的做法,即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面,用 html4 标签替换 html5 标签,这要比为了保持兼容性而写大量 hack 的做法更轻便一些。

selectivizr(www.selectivizr.com)

// 让IE6/7/8支持 ::first-child等高级css选择符

cdn地址:

<script src="https://cdn.bootcss.com/selectivizr/1.0.2/selectivizr-min.js"></script>

IE9.js(http://www.9416.cn/html/support/254.html)

// 修复从IE6-IE9的很多bug和缺损功能

CSS3Pie(www.css3pie.com)

// 让IE6-IE9支持圆角,背景渐变,边框图片,盒子阴影,RGBa颜色可视化的css3功能

cdn地址:

<script src="https://cdn.bootcss.com/css3pie/2.0beta1/PIE_IE9.js"></script>

Respond.js(www.github.com/scottjehl/respond)

// 让旧版浏览器支持媒体查询

cdn地址:

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

-prefix-free(lea.verou.me/projects)

// 为需要厂商前缀的css3声明添加前缀

cdn地址:

<script src="https://cdn.bootcss.com/prefixfree/1.0.7/prefixfree.min.js"></script>

-borderBoxModel.js(www.github.com/albertogasparin/borderBoxModel

// 让IE6和IE7支持CSS3的box-sizing属性

基于CSS3 flexbox规范的网格样式

<link href="https://cdn.bootcss.com/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet">