zoukankan      html  css  js  c++  java
  • 华丽的bootstrap3碰到土鳖IE6

          之前由于看好很容易上手的bootstrap,然后用这个框架写了个网站,对于不会美工和细致设计的攻城师来说,bootstrap是个界面设计的瑞士军刀,三下五除二就能搞定个不算太丑的页面。

          吭哧吭哧工作了一阵,网站功能基本完工,最后要发布时发现要有点麻烦,毕竟当前还是有很大一部分用户生活在IE678的世界中,真心希望他们能过上好日子。

          攻城师就是解决问题的,因此为了能够使古老的IE能够穿上华丽的服装,就只好着手改造一下,修补一下当前的页面,使其不至于惨不忍睹。网上已经有关于让bootstrap适应ie6的解决方案,叫做鄙视IE(bsie),Bootstrap IE6 兼容库,奈何目前我的网站是用bootstrap3编写的,那个鄙视IE是针对bootstrap2.x编写的,但万变不离其宗,就参考鄙视IE的写法,再结合自己的项目做些修改。

          工作还在进行中,但思路确定之后只是时间的问题,不至于一开始看到四分五裂的页面时的恐惧与担忧。

      其实bootstrap3对于ie8的支持还可以,只要加入类似如下的JS,在ie8中大致能看,需要修改的也只是很少的局部。

     

        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    

     

        大致用到的对于IE的css hack方式为:

    .brand{
        *border- 0;
    }
    div.col-sm-offset-2{
        _margin-left: 8.8%;
    }
    .nav li {
        float: left;
    }
    

      也就是“_”:只有IE6才认识,“*”:IE6和IE7都认识,其它的就以if lt IE 8之类的语句来包含针对特定IE浏览器版本的css或js。

          另外别忘记定义html的doctype,没有这个标记,版面布局会处于一个很莫名其妙的状态中,调试了老半天大概都不知道是什么情况:<!DOCTYPE html>

     

  • 相关阅读:
    收藏的网站
    记录
    在我的收藏列表里取消收藏功能的实现(不使用直接操作dom的方法)
    uniapp预览图片
    uni-app 中如何打开外部应用,如:浏览器、淘宝、AppStore、QQ等
    uniapp打包上架ios
    uniapp实现倒计时
    uniapp实现支付功能
    uniapp关闭页面回弹效果
    uniapp中使用websocket实现实时聊天功能
  • 原文地址:https://www.cnblogs.com/dreampursuer/p/3422758.html
Copyright © 2011-2022 走看看