当项目需求需要兼容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引入不起作用解决的更多相关文章

  1. 解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题

    插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...

  2. 让IE系列支持HTML5的html5shiv.js和respond.min.js

    HTML5越来越成为主流,被广大搜索引擎所使用,但IE对HTML5的支持却常被人唾弃. 解决方案有两种: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面, ...

  3. respond.js第六行 SCRIPT5: 拒绝访问。跨域问题

    问题描述:respond.js第六行 SCRIPT5: 拒绝访问.昨天为学弟学妹讲bootstrap,说到对ie78的兼容问题,解决办法中有引入html5shiv.js和respond.js两个文件夹 ...

  4. Media Queries之Respond.js

    一.stackoverflow上面对css3-mediaqueries.js与respond.js的比较 css3-mediaqueries.js Pros Supports min, max and ...

  5. html5shiv.js and respond.min.js

    因为用到这两个插件,所以记录下来.. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持Css3 Media Quer ...

  6. html5shiv.min.js 和 respond.min.js 作用(bootstrap做IE低版本兼容时需要用到这两个插件)

    1. html5shiv.min.js解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min.js让不支持css3 Media Query的浏览器包括I ...

  7. html5shiv.js和respond.min.js

    做页面常用的东西,写这里用的时候省点去找了... html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持css3 Medi ...

  8. html5shiv.js和respond.min.js的作用

    html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览 ...

  9. 【IE低配杀手】html5shiv.js和respond.min.js

    HTML5现在越来越流行了,但是一遇到IE低版本浏览器就傻眼了,今天整理了一下一些解决办法. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. res ...

随机推荐

  1. 关于在真实物理机器上用cloudermanger或ambari搭建大数据集群注意事项总结、经验和感悟心得(图文详解)

    写在前面的话 (1) 最近一段时间,因担任我团队实验室的大数据环境集群真实物理机器工作,至此,本人秉持负责.认真和细心的态度,先分别在虚拟机上模拟搭建ambari(基于CentOS6.5版本)和clo ...

  2. 【javascript】javascript学习之js脚本的解析步骤

    将javascript代码加入到HTML代码中,即使用<script>标签的方式有两种:直接嵌入页面中和使用外部js文件. 使用<script>标签嵌入html代码中时,需要指 ...

  3. 【javascript/css】Javascript+Css实现图片滑动浏览效果

    今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...

  4. 自定义控件如何给特殊类型的属性添加默认值 z(转)

    自定义控件如何给特殊类型的属性添加默认值 z 定义控件如何给特殊类型的属性添加默认值了,附自定义GroupBox一枚 标题有点那啥,但确实能表达我掌握此法后的心情. 写自定义控件时往往会有一个需求,就 ...

  5. 常用vue请求交互数据方式

    几种 vue的数据交互形式 var that=this get请求 that.$http.get("1.txt").then(function(result){ console.l ...

  6. Go语言备忘录(1):基本数据结构

    本文内容是本人对Go语言的变量.常量.数组.切片.映射.结构体的备忘录,记录了关键的相关知识点,以供翻查. 文中如有错误的地方请大家指出,以免误导!转摘本文也请注明出处:Go语言备忘录(1):基本数据 ...

  7. 常用工具说明--强大的PostMan

    PsotMan介绍和使用 Postman介绍 Postman是google开发的一款功能强大的网页调试与发送网页HTTP请求,并能运行测试用例的的Chrome插件.其主要功能包括: 模拟各种HTTP ...

  8. nginx 代理转发 wcf接口

    前言 以前对比过enginx和其他几个web服务器(IIS,Apache,lighttpd)的处理静态文件的能力,enginx是最好的,甚至超过其他的几倍. 虽说enginx官方声明在Windows上 ...

  9. Razor 将C#对象转换成Javascript对象, json还原被转码的字符 &quot·· HTML转义符

    Razor 将C#对象转换成Javascript对象 在Razor中使用Json字符串,特殊字符被自动转义(如:\"->") @{ var jsonStr = Html.Ra ...

  10. vuex 实现vue中多个组件之间数据同步以及数据共享。

    http://pan.baidu.com/s/1hrJfpli  demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...