zoukankan      html  css  js  c++  java
  • bootstrap3 兼容IE8浏览器

      近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等,bootstrap都已经预先定义好了,当我们制作网页上,只需直接调用里面的css即可

      bootstrap是一个响应式的布局,你可以在宽屏电脑、普通电脑,平板电脑,手机上都得到非常优秀的布局体验。这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式。IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用进行兼容IE8,如果想兼容IE6,IE7,可以搜索bsie (bootstrap2)

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

    1、使用html5声明

    <!DOCTYPE html>
    这里不可以有空格
    <html>
    

    注:写成<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">是不可行的

    2、加入meta标签

    确定显示此网页的IE版本

    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    

    注:bootstrap不支持IE兼容模式,为了让IE浏览器运行最新的渲染模式,将添加以上标签在页面中,IE=edge表示强制使用IE最新内核,chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame

    3、引入bootstrap文件

    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
    

    4、引入html5shiv.min.js和respond.min.js

       让不(完全)支持html5的浏览器“支持”html5标签

    <!--[if lt IE 9]>
    <script src="js/bootstrap/html5shiv.min.js"></script>
    <script src="js/bootstrap/respond.min.js"></script>
    <![endif]-->
    

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

    <script src="js/bootstrap/jquery-1.12.0.min.js"></script>
    

    6、在IE8下测试,发现一个问题placeholder不被支持,下面是解决IE支持placeholder的方法,本文引用的jquery是1.12.0测试通过,先引用jquery

    <script type="text/javascript" src="js/bootstrap/jquery-1.12.0.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    

    也可以用其他的jquery版本,再引入

    <script type="text/javascript" src="js/bootstrap/jquery.placeholder.js"></script>
    

    然后在文件中加入一下代码

    <script type="text/javascript">
        $(function () {
            $('input, textarea').placeholder();
        });
    </script>
    

    代码总结如下:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
        <meta name="author" content="zhy" />
        <title>ie8</title>
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
        <!--[if lte IE 9]>
        <script src=js/bootstrap/respond.min.js"></script>
        <script src=js/bootstrap/html5shiv.min.js"></script>
        <![endif]-->
        <script src="js/bootstrap/jquery-1.12.0.min.js"></script>
        <script src="js/bootstrap/bootstrap.min.js"></script>
    </head>
    <body>
    </body>
    </html>
    

    附注:

    1、IE下判断IE版本的语句

    <!--[if lte IE 6]>
    <![endif]-->
    IE6及其以下版本可见
    
    <!--[if lte IE 7]>
    <![endif]-->
    IE7及其以下版本可见
    
    <!--[if IE 6]>
    <![endif]-->
    只有IE6版本可见
    
    <![if !IE]>
    <![endif]>
    除了IE以外的版本
    
    <!--[if lt IE 8]>
    <![endif]-->
    IE8以下的版本可见
    
    <!--[if gte IE 7]>
    <![endif]-->
    IE7及大于IE7的版本可见
    

    lte:就是Less than or equal to的简写,也就是小于或等于的意思。
    lt :就是Less than的简写,也就是小于的意思。
    gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
    gt :就是Greater than的简写,也就是大于的意思。
    ! : 就是不等于的意思,跟javascript里的不等于判断符相同

    2、bootstrap3相关css、js

       下载地址:http://pan.baidu.com/s/1getpDjt

         jquery.placeholder.js文件的下载地址https://github.com/mathiasbynens/jquery-placeholder

  • 相关阅读:
    BZOJ2219数论之神——BSGS+中国剩余定理+原根与指标+欧拉定理+exgcd
    Luogu 3690 Link Cut Tree
    CF1009F Dominant Indices
    CF600E Lomsat gelral
    bzoj 4303 数列
    CF1114F Please, another Queries on Array?
    CF1114B Yet Another Array Partitioning Task
    bzoj 1858 序列操作
    bzoj 4852 炸弹攻击
    bzoj 3564 信号增幅仪
  • 原文地址:https://www.cnblogs.com/gamehiboy/p/5147390.html
Copyright © 2011-2022 走看看