• 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]-->
  • 相关阅读:
    HTML5程序设计web workers API 学习笔记
    HTML5 拖拽API 学习笔记
    2013.03.23这天的一点感触和计划
    localStorage实现返回到原位置以及pjax的反思
    HTML5 localStorage浅谈
    javascript学习之函数对象简介
    display:-webkit-box
    由登录表单的用户体验细节说开
    前端和用户体验
    Laravel实践step1,一个简单的crud
  • 原文地址:https://www.cnblogs.com/xiaoshudian/p/7138624.html
Copyright © 2020-2023  润新知