bootstrap3适配IE8

最近在做一个内部用的在线生成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的某些元素对于一些浏览器不能完全兼容,下图是官方说法:

由于工作只需要兼容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
12
<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 %}  
  
{%- endblock styles %}
使用1.x版本的jquery.js ,且jquery.js一般需要在其它js之前引用

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

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

下面贴个我完整的base.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">>&times;</span></button>
            <h4><strong>{{category}}:{{ message }}</strong></h4>
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}
    
    {%- endblock content %}
    {% block scripts %}
    {%- endblock scripts %}
    {%- endblock body %}
  </body>
{%- endblock html %}
</html>

参考文章:

Bootstrap官网

bootstrap 相容 IE8 浏览器

Bootstrap

兼容IE8

参考文章:

转载请注明原作者: 周淑科(https://izsk.me)