zoukankan      html  css  js  c++  java
  • Bootstrap 3兼容IE8浏览器(转)

    Bootstrap是一个响应式的布局,你可以在宽屏电脑、普通电脑,平板电脑,手机上都得到非常优秀的布局体验。这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式。IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用进行兼容IE8。但是笔者多次尝试没有成功,IE8的布局是乱的。直到今天忍无可忍,决定再尝试一下,最终获得成功。有些细节没有注意到,导致IE8没法响应式布局。

    下面讲解下如何让Bootstrap 3兼容IE8浏览器,至于有人会问我如何兼容IE6 IE7,请绕道搜索bsie (bootstrap2)。

    Bootstrap在IE8中肯定不如Chrome、Firefox、IE11那么完美,部分组件不保证完全兼容,还是要Hack的。这里不谈。

    1、使用html5文档声明

    使用zencoding的用户 输入 html:5 再按Tab键即可。

    2、加入meta标签

    前者定义媒体查询,后者确定显示此网页的IE版本。

    3、引入bootstrap文件

    这步十分重要,这里要看你是引用其他网站(CDN)的bootstrap文件还是把Bootstrap文件放本地。
    这里我放在本地,因为之后的部署比较简单。

     4、引入respond.js 和 html5.js

    respond.jsGithub)是用于媒体查询的,项目说明描述:要和需要进行媒体查询的文件放在同一域中。不然CDN部署的需要更改一些选项,之后再说。

    html5shiv : html5.js(Google Code)(Github)是让不(完全)支持html5的浏览器“支持”html5标签。

    4.1 CSS文件在CDN上(或子域名)的Respond.js部署

    详情请见:https://github.com/scottjehl/Respond#cdnx-domain-setup

    Github上说,这个js是通过ajax复制一份你的css文件。所以需要一个代理页面去请求文件。

    需要上传一些文件,步骤比较复杂,而且一般公共CDN基本没人有这种操作权限。

    之后再添加代码。

    5、添加1.X版本的Jquery库

    Jquery 2.0以上就不再支持IE 6/7/8 这三大虐心神器了。所以要想使用Bootstrap3中的一些插件效果,比如modal 弹出层对话框这类控件。我们就需要添加 2.0以下的,这里我用1.10.2的Jquery库。

     6、总结

    本人非前端工程师,只是爱好者一枚,如有错误还请批评指教。大家相互学习~

    本人也正是做了个Bootstrap3的小项目(姓名代码查询),正是这个项目让我总结以上经验出来。

    主要还是在于让respond.js起效果,关键就是让bootstrap的文件和respond.js同域,不同域需要用CDN上的html做ajax。

    懒人代码总结如下:

    <!doctype html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Jophy" />//可删
    <title>ie8</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap/css/style.css">//根据需要引用
    <!--[if lte IE 9]>
    <script src="bootstrap/js/respond.min.js"></script>
    <script src="bootstrap/js/html5.js"></script>//根据需要引用(本此项目未引用)
    <![endif]-->
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>//根据需要引用
    <script src="bootstrap/js/bootstrap.min.js"></script>
    </head>//根据需要引用
    <body>
    </body>
    </html>

    原文引自:http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html

  • 相关阅读:
    php命令注入
    mysql事物
    安装php环境
    移除服务器缓存实例
    show user profile synchronization tools
    manual start user profile import
    JSON is undefined. Infopath Form People Picker in SharePoint 2013
    asp.net web 应用站点支持域账户登录
    Load sharepoint envirement by powershell
    sharepoint 2016 download
  • 原文地址:https://www.cnblogs.com/xiaoerlang90/p/4320447.html
Copyright © 2011-2022 走看看