zoukankan      html  css  js  c++  java
  • 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]-->
  • 相关阅读:
    mysql基础整理01
    继承、接口、static、abstract
    重载与重写
    单例模式
    我的程序人生
    Idea的Maven项目引入模块
    测试单元测试完毕关闭jvm
    java线程
    logback日志的美化
    Netty中消除开始的日志消息修改日志级别
  • 原文地址:https://www.cnblogs.com/xiaoshudian/p/7138624.html
Copyright © 2011-2022 走看看