zoukankan      html  css  js  c++  java
  • Bsie(鄙视IE)

    http://www.bootcss.com/p/bsie/

    欢迎,这是bsie项目主页。

    简介

    bsie弥补了Bootstrap对IE6的不兼容。Bootstrap是 twitter.com 推出的非常棒的web UI工具库。

    目前,bsie能在IE6上支持大部分bootstrap的特性,可惜,还有一些实在无法支持...

    下面的这个表格就是当前已经被支持的bootstrap的组件和特性:

    组件       特性
    -----------------------------------------------------------
    grid            fixed, fluid
    navbar          top, fixed
    nav             list, tabs, pills
    dropdown        dropdown (two level)
    buttons         button, group color, size, dropdown-button, 
                    (disable state is not dynamic)
    form            default, horizontal, inline, all controls, 
                    validation state
    tables          hover
    pagination      all
    labels          all
    badges          all
    code            all
    modal           most
    tooltip         all
    popover         all
    alert           all
    typeahead       all
    progressbar     most
    media           all
    wells           all
    hero unit       all
    icons           all
    

    文件用途介绍

    bootstrap/css/bootstrap.css :

    这是bootstrap原始的css文件。

    bootstrap/css/bootstrap.min.css :

    这是bootstrap原始的压缩后的css文件。

    bootstrap/css/bootstrap-ie6.css :

    这是bsie的主要的css文件。

    bootstrap/css/bootstrap-ie6.min.css :

    这是bsie压缩后的css文件。

    bootstrap/css/ie.css :

    这是bsie额外添加的css补丁,这个文件中的大部分内容无法写入到 .less 文件中,并且必须紧跟在 bootstrap-ie6.css 之后在<head> 中引入。

    js/bootstrap-ie.js :

    这个javascript补丁文件用于解决一些纯CSS无法完成工作。

    bootstrap/img/glyphicons-halflings.png-8.png :

    这个图片文件是针对IE6的透明格式图标,是png 8bit格式的,显示效果虽然并不是太好,但是也还可以接受。

    bootstrap/less-ie6 :

    这个目录下是所有打过补丁的 .less 文件,你可以用lessc命令重新编译出 bootstrap-ie6.css文件

    案例

    在bsie目录下有以下几个案例:

    test-XXX.html, 例如 test-buttons.html  test-form.html

    p-1.html...p-N.html, 这几个文件都是直接从bootstrap案例中拷贝过来的

    使用手册

    第1步, 在 <head> 中添加以下css文件:

      <!-- Bootstrap css file v2.2.1 -->
      <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    
      <!--[if lte IE 6]>
      <!-- bsie css 补丁文件 -->
      <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
    
      <!-- bsie 额外的 css 补丁文件 -->
      <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
      <![endif]-->
    

    第2步,在html文档结尾处加入以下的javascript文件:

      <!-- jQuery 1.7.2 or higher -->
      <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    
      <!-- Optional, bootstrap javascript library -->
      <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    
      <!--[if lte IE 6]>
      <!-- bsie js 补丁只在IE6中才执行 -->
      <script type="text/javascript" src="js/bootstrap-ie.js"></script>
      <![endif]-->
    

    第3步,根据你的情况,这一步是可选的:

    IE6   注意: : 对每一个新加载的html片段都要调用 $.bootstrapIE6(el) 函数,其实主要就是指的通过ajax获取到的html内容

    /**
     * 让el容器中的的所有元素都能兼容IE6
     */
    $.bootstrapIE6(el)
    

    目前在IE6下还不能支持tab控件的嵌套,主要是因为IE6不支持css的子选择器

    IE6-7 hack

    IE6 hack

      _zoom:1;
    

    IE6-7 hack

      *zoom:1;
    

    IE6 bug fix tip

    hasLayout (clear float):

      .container 
      { 
        zoom:1; 
      }
    

    其它能够触发haslayout的css属性:

      position:   absolute
      float:      left | right
      display:    inline-block
            except 'auto'
      height:     except 'auto'
      zoom:       except 'normal'
      overflow:   hidden | scroll | auto
      overflow-x/-y: hidden | scroll | auto
      position:   fixed
      min-  any value
      max-  except 'none'
      min-height: any value
      max-height:  except 'none'
      writing-mode: tb-rl   /* only for MS */
    

    下面列出的css属性能够清除hasLayout:

              auto;
      height:       auto;
      max-    none;   /* IE7 */
      max-height:   none;   /* IE7 */
      position:     static;
      float:        none;
      overflow:     visible;
      zoom:         normal;
      writing-mode: lr-t;
    

    In one selector, following css will not set hasLayout=false:

      .element {
        display:inline-block;
        display:inline;
      }
    

    inline-block:

      `.container 
      { 
        zoom:1; 
        display:inline;
      }
    

    透明色:

      .element
      {
        border-color:pink/* rarely used color */;
        filter:chroma(color:pink);
      }
      * 注意:在relative定位的容器中包含的absolute元素将会由于filter的缘故而消失
    

    body元素的背景色:

      body { /* Faild: Sometime, it will not render whole page by gray color  */
        background-color: gray;
      }
      * html { /* Success! */
        background-color: gray;
      }
    

    IE6-7  ul.dropdown-menu 必须增加以下样式: *explicit-width;

      /* for example */
      *180px;
    

    If you have some patch for these library, Please send to:ddouble.cn@gmail.com

    Thanks.

  • 相关阅读:
    SpringBoot自定义FailureAnalyzer
    Linux 系统目录结构
    Spring Boot实战:静态资源处理
    Activiti7整合SpringBoot(十二)
    Acvitivi网关(十一)
    为什么阿里巴巴要禁用Executors创建线程池?
    lqb 基础练习 数列排序 (sort的使用)
    lqb 入门训练 A+B问题
    lqb 入门训练 序列求和 (PS:用长整数做数据的输入输出)
    lqb 入门训练 圆的面积 (PS: PI的精确计算方法 atan(1.0) * 4)
  • 原文地址:https://www.cnblogs.com/hubing/p/4445645.html
Copyright © 2011-2022 走看看