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]-->