bootstrap3适配IE8

发表于 分类于 阅读次数： 本文字数： 5k 阅读时长 ≈ 5 分钟

最近在做一个内部用的在线生成oracle性能数据的报表工具,那段时期刚好在看flask框架,所以整个项目是用flask来做,前端使用的bootstrap3,由于工作环境需要,大部分的机器还停留在IE9及以下阶段(什么年代了还IE9,真的好想骂人),直接使用的bootstrap会出现页面排版错位情况,bootstrap3开始已放弃对IE9的支持,只得另想办法,好在我们都站在巨人的肩膀上,办法还是有的,在这记录一下.

Bootstrap

本人对前端知识不是很熟悉,也只是停留在需要的时候上网查下资料的程序,在这之前并没有接触过bootstrap,不敢妄加评说,这里就不过多介绍了,大家上bootstrap的官网,首页第一句话就是: bootstrap4 is comming.虽然bootstrap当初是给移动端设计的,但是给我的感受就一句话:用过的都说好

其实bootstrap的资料还是挺多的,IE低版本的兼容问题在bootstrap官网的Get Start就有很详细的说明:

bootstrap3其实是支持IE8的,只不过css3有某些属性和HTML5的某些元素对于一些浏览器不能完全兼容,下图是官方说法:

bootstrap-ie91

由于工作只需要兼容IE9,IE8,而如果是想适配IE8及以下,可以使用bsie,当然该项目只适用于bootstrap2.

兼容IE8

IE9以下的版本是不支持 CSS3 Media Queries的, 所以IE9以下要使用bootstrap3,必须要引入两个js文件:

html5shiv.js

Respond.js

html5shiv.js的作用是让那些不完全运行html5元素的浏览器支持html5

而Respond.js则是让IE8及以下版本支持CSS3 Media Queries.更详细的介绍请移步上面的GitHub链接

所以,要让bootstrap3适配IE8,要做以下几步:

  • 申明使用html5

    在每个html渲染版本文件(或者父模板)中以开头,而且该行与下一行之间不能有空行

  • 加入meta标签

    在html文件的metas块中加入以下几句话,而且必须是在head块的最开头位置(网上有人提到过,但是具体的链接找不到了),其中,IE=edge是强制浏览器使用最新版本内核渲染

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <head>
    {% block head %}
    {% block metas %}
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />   
    {%- endblock metas %}
        <title>{% block title %} Report Form On Line {%- endblock title %}</title>
      ...
    </head>

  • 引入html5shiv.min.js和respond.min.js

    这两个js的作用已在上面说过,具体入如下,先判断IE的版本,低于IE9的则引用,且不能使用如@import或者file://形式引入进来

1
2
3
4
5
6
{% block styles %}  
  <!--[if lt IE 9]>
      <script src="{{url_for('static',filename='js/html5shiv.js')}}"></script>
      <script src="{{url_for('static',filename='js/respond.js')}}"></script>
  <![endif]-->
{%- endblock styles %}

  • 使用1.x版本的jquery.js ,且jquery.js一般需要在其它js之前引用

  • html中对css文件的引用要先于js文件的引用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66

    虽然折腾到最后在IE8下勉强能用,但有些地方的样式还是不尽人意,直接放弃了.

    下面贴个我完整的base.html

    ```html
    <!DOCTYPE html>
    <html lang="en">
    {% block html %}
    <head>
       {% block head %}
       {% block metas %}
           <meta charset="utf-8">
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
           <meta http-equiv="X-UA-Compatible" content="IE=edge" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />   
        {%- endblock metas %}
           <title>{% block title %} Report Form On Line {%- endblock title %}</title>
     {% block styles %}

         <!--[if lt IE 9]>
             <script src="{{url_for('static',filename='js/html5shiv.js')}}"></script>
             <script src="{{url_for('static',filename='js/respond.js')}}"></script>
         <![endif]-->

         <link rel="stylesheet" href="{{url_for('static',filename='css/bootstrap.css')}}">
         <link rel="stylesheet" href="{{url_for('static',filename='css/classic.css')}}">
         <link rel="stylesheet" href="{{url_for('static',filename='css/bootstrap-datetimepicker.min.css')}}">
         <link rel="shortcut icon" href="{{ url_for('static',filename='favicon.ico') }}" type="image/x-icon">
         <link rel="icon" href="{{ url_for('static',filename='favicon.ico') }}" type="image/x-icon">
         <style type="text/css">  
           .navbar .nav > li .dropdown-menu {  
               margin: 0;  
           }  
           .navbar .nav > li:hover .dropdown-menu {  
               display: block;  
           }
         </style>
     {%- endblock styles %}
     {%- endblock head %}
    </head> 
    <body>
       {% block body -%}
       {% block navbar %}
       {%- endblock navbar %}
       {% block content -%}

       {% with messages = get_flashed_messages(with_categories=true) %}
       <!-- Categories: success (green), info (blue), warning (yellow), danger (red) -->
         {% if messages %}
           {% for category,message in messages %}
             <div class="alert alert-{{ category }}">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">>×</span></button>
               <h4><strong>{{category}}:{{ message }}</strong></h4>
             </div>
           {% endfor %}
         {% endif %}
       {% endwith %}

       {%- endblock content %}
       {% block scripts %}
       {%- endblock scripts %}
       {%- endblock body %}
     </body>
    {%- endblock html %}
    </html>

参考文章: