html5shiv.js和respond.js引入不起作用解决
当项目需求需要兼容ie7,8这些奇葩浏览器时,考虑到h5的便捷性及响应式,我们往往引入html5shiv.js和respond.js来让ie7,8兼容h5及一些响应式变化,引入时就需要用到条件注释,原来写条件注释要么copy其他项目上的,要么随便写写,从没当回事,也没注意格式上有什么要求,下面来看看因为条件注释引起的大麻烦。
//css
<style>
header {
width:100px;
height:100px;
color:red;
background:#ccc;
}
</style>
//html
<header>
hello world!
</header>
看上面的代码,我们可以想象出来如果引入正确ie8下,应该是灰色背景下小红字,先来看下正确的效果
下面来看下各种错误引入html5shiv.js的条件注释语句及带来的后果(ie8下测试)
<!-- [if lt ie 9]>
<script src="lib/html5shiv/html5shiv.js"></script>
<![endif]-->
看条件注释语句似乎没什么不妥,看效果
怎么没效果???F12看控制台
header标签未识别,坑爹啊,看起来没错啊,换html5shiv.js版本,换cdn统统没用,再仔细检查发现在中括号前多了个空格,把空格去掉,效果变正常。还有在中括号之后加空格会引起异常,中括号里面ie和9之间一定要加空格不然也会异常。看似漫不经心的一个小空格也会引起大错误,用条件注释时一定要严格地按照格式来写如下:
<!--[if lt ie 9]>
<![endif]-->
html5shiv.js和respond.js引入不起作用解决的更多相关文章
- 解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
- 让IE系列支持HTML5的html5shiv.js和respond.min.js
HTML5越来越成为主流,被广大搜索引擎所使用,但IE对HTML5的支持却常被人唾弃. 解决方案有两种: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面, ...
- respond.js第六行 SCRIPT5: 拒绝访问。跨域问题
问题描述:respond.js第六行 SCRIPT5: 拒绝访问.昨天为学弟学妹讲bootstrap,说到对ie78的兼容问题,解决办法中有引入html5shiv.js和respond.js两个文件夹 ...
- Media Queries之Respond.js
一.stackoverflow上面对css3-mediaqueries.js与respond.js的比较 css3-mediaqueries.js Pros Supports min, max and ...
- html5shiv.js and respond.min.js
因为用到这两个插件,所以记录下来.. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持Css3 Media Quer ...
- html5shiv.min.js 和 respond.min.js 作用(bootstrap做IE低版本兼容时需要用到这两个插件)
1. html5shiv.min.js解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min.js让不支持css3 Media Query的浏览器包括I ...
- html5shiv.js和respond.min.js
做页面常用的东西,写这里用的时候省点去找了... html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持css3 Medi ...
- html5shiv.js和respond.min.js的作用
html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览 ...
- 【IE低配杀手】html5shiv.js和respond.min.js
HTML5现在越来越流行了,但是一遇到IE低版本浏览器就傻眼了,今天整理了一下一些解决办法. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. res ...
随机推荐
- 关于在真实物理机器上用cloudermanger或ambari搭建大数据集群注意事项总结、经验和感悟心得(图文详解)
写在前面的话 (1) 最近一段时间,因担任我团队实验室的大数据环境集群真实物理机器工作,至此,本人秉持负责.认真和细心的态度,先分别在虚拟机上模拟搭建ambari(基于CentOS6.5版本)和clo ...
- 【javascript】javascript学习之js脚本的解析步骤
将javascript代码加入到HTML代码中,即使用<script>标签的方式有两种:直接嵌入页面中和使用外部js文件. 使用<script>标签嵌入html代码中时,需要指 ...
- 【javascript/css】Javascript+Css实现图片滑动浏览效果
今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...
- 自定义控件如何给特殊类型的属性添加默认值 z(转)
自定义控件如何给特殊类型的属性添加默认值 z 定义控件如何给特殊类型的属性添加默认值了,附自定义GroupBox一枚 标题有点那啥,但确实能表达我掌握此法后的心情. 写自定义控件时往往会有一个需求,就 ...
- 常用vue请求交互数据方式
几种 vue的数据交互形式 var that=this get请求 that.$http.get("1.txt").then(function(result){ console.l ...
- Go语言备忘录(1):基本数据结构
本文内容是本人对Go语言的变量.常量.数组.切片.映射.结构体的备忘录,记录了关键的相关知识点,以供翻查. 文中如有错误的地方请大家指出,以免误导!转摘本文也请注明出处:Go语言备忘录(1):基本数据 ...
- 常用工具说明--强大的PostMan
PsotMan介绍和使用 Postman介绍 Postman是google开发的一款功能强大的网页调试与发送网页HTTP请求,并能运行测试用例的的Chrome插件.其主要功能包括: 模拟各种HTTP ...
- nginx 代理转发 wcf接口
前言 以前对比过enginx和其他几个web服务器(IIS,Apache,lighttpd)的处理静态文件的能力,enginx是最好的,甚至超过其他的几倍. 虽说enginx官方声明在Windows上 ...
- Razor 将C#对象转换成Javascript对象, json还原被转码的字符 "·· HTML转义符
Razor 将C#对象转换成Javascript对象 在Razor中使用Json字符串,特殊字符被自动转义(如:\"->") @{ var jsonStr = Html.Ra ...
- vuex 实现vue中多个组件之间数据同步以及数据共享。
http://pan.baidu.com/s/1hrJfpli demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...