【主要是针对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">

低版本IE兼容 H5+CSS3 方案的更多相关文章

  1. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

  2. 低版本Flume兼容高版本elasticsearch

    Flume更新比较慢,而elasticsearch更新非常快所以当涉及更换elasticsearch版本时会出现不兼容问题. apache-flume-1.6.0+elasticsearch1.5.1 ...

  3. 低版本系统兼容的ActionBar(二)ActionProvider+分离式ActionBar+分离式的ActionMode

           这篇文章主要讲的是在低版本兼容的ActionBar中实现自定义的ActionProvider,ShareActionProvider的使用方法,如何实现分离式ActionBar,外加在分 ...

  4. 低版本系统兼容的ActionBar(一)设置颜色+添加Menu+添加ActionMode

        之前我一直用ActionBarSherlock这个开源项目来做ActionBar,因为它可以让低版本的设备也能用上ActionBar.但是在最新的SDK中Google提供了一个AppCompa ...

  5. angularjs1+requirejs+ bootstrap+ jQuery低版本配合兼容ie8+浏览器

    angularjs兼容低版本IE浏览器(IE8)angularjs在1.3之后的版本都是选择放弃对IE8及更低IE版本的支持,但是就目前的开发形式来看,IE8的使用客户还是蛮多的,最近有个项目要求尽量 ...

  6. 整理低版本ie兼容问题的解决方案

    CSS hack \9    所有的IE10及之前 *     IE7以及IE7以下版本的 _     IE6以及IE6以下版本的      !important  提升样式优先级权重 1.ie6,7 ...

  7. 低版本ie兼容问题的解决方案

    CSS hack \9    所有的IE10及之前 *     IE7以及IE7以下版本的 _     IE6以及IE6以下版本的      !important  提升样式优先级权重 1.ie6,7 ...

  8. 低版本系统兼容的ActionBar(六)用Fragment+ViewPager+Tab实现快速导航

    Tab经常和Fragment结合使用,这一讲我们用3种方式来实现这种快捷导航. 0.重要的两个监听器 MyTabListener,这个我们之前已经接触过了 package com.kale.actio ...

  9. IE低版本浏览器兼容问题

    head标签中填写如下代码 <meta name="renderer" content="webkit"/> <meta name=" ...

随机推荐

  1. Flutter学习笔记(4)--Dart函数

    如需转载,请注明出处:Flutter学习笔记(4)--Dart函数 Dart是一个面向对象的语言,所以函数也是对象,函数属于Function对象,函数可以像参数一样传递给其他函数,这样便于做回调处理: ...

  2. Android 装逼技术之暗码启动应用

    什么是暗码? 在拨号盘中输入*#*#<code>#*#*后,APP 可以监控到这些输入,然后做相应的动作,比如启动应用,是不是有点骚. 下面看下这个骚操作是如何实现的. 效果预览 源码 D ...

  3. 3. Django每日一码 之 Serializers 源码

    2019-7-6 今日源码:rest-framework 序列化Serializers 序列化组件Serializers 源码分析 首先,它需要 data .many . instance,其中 in ...

  4. Python面向对象知多少?

    问题场景 小王是某游戏公司的新入职的职员,有一天,组长交给了他一个任务,为一个即将准开发的一款游戏设计一些人物角色,其中包括多种职业,如牧师.战士和法师等等.每种职业都有一些自身独有的属性和技能,但是 ...

  5. CDQZ集训DAY8 日记

    又一次翻车…… 先提一句昨晚的事.昨天晚上身后一帮成都七中的人用十分戏谑的语气交出了达哥的名字,看着NOI2017的获奖名单,如果他们真的是在嘲笑的话,真的挺想上去干他们一顿的…… 上午考试第一题一脸 ...

  6. Bzoj 2013 [Ceoi2010] A huge tower 题解

    2013: [Ceoi2010]A huge tower Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 471  Solved: 321[Submit ...

  7. sql 数据处理时join字段慎重选择--避免出现double数据!

    前几天做BI Tabular表格模型的时候,数据中心核对数据发现模型展现数据比实际数据要多,经过核查之后,发现原来我是一个不经意,在做数据选取的时候,inner join的字段CITY_NAME_CN ...

  8. 使用ML-Agents Toolkit(0.5)训练游戏ai之环境搭建

    ML-Agents toolkit目前已经更新到0.5版本了. 要想使用这个Unity插件训练人工智能需要如下软件 1.Anaconda指的是一个开源的Python发行版本,主要是让你的训练环境与其它 ...

  9. 洛谷P2285 【[HNOI2004]打鼹鼠】

    每次打鼹鼠的机器人总是从某一次打鼹鼠的地方走过来的 对鼹鼠出现时间从小到大排序 f[i]表示到第i个鼹鼠(打第i个)最多能打多少个鼹鼠 f[i]=max(f[j]+1)f[i]=max(f[j]+1) ...

  10. 百度AI之百度图像识别java版本使用

    百度AI之百度图像识别java版本使用\ 官网 http://ai.baidu.com/ 创建应用 查看 appid,appkey,sk 下载sdk https://ai.baidu.com/sdk# ...