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

  width:      except 'auto'

  height:     except 'auto'

  zoom:       except 'normal'

  overflow:   hidden | scroll | auto

  overflow-x/-y: hidden | scroll | auto

  position:   fixed

  min-width:  any value

  max-width:  except 'none'

  min-height: any value

  max-height:  except 'none'

  writing-mode: tb-rl   /* only for MS */

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

  width:        auto;

  height:       auto;

  max-width:    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 必须增加以下样式： *width:explicit-width;

  /* for example */

  *width:180px;

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

Thanks.

Bsie（鄙视IE）的更多相关文章

  1. 提示用户升级浏览器代码 低于ie9的浏览器提示

    一般想做一些酷炫的网站都有个烦恼,那就是兼容ie浏览器,好在现在使用ie的也越来越少,微软也转战edge浏览器. 使用 Bootstrap经常用js插件可以模拟兼容旧版本的浏览器(bsie 鄙视IE) ...

  2. html5标签兼容低版本浏览器

    随着html5(后面用h5代表)标签越来越广泛的使用,IE不识别h5标签的问题让人很是烦恼. 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:block属性,就能让这个元 ...

  3. yiibooster+bsie

    对于使用yii框架来说,如果使用bootstrap框架的话,现在有一个比较方便的使用途径:yiibooster.官网地址是:http://yii-booster.clevertech.biz/当然,我 ...

  4. 为.NET搭建Linux的开发环境,鄙视那些将简单事情复杂化的人

    写在前面的吐槽 原本跨平台开发很容易的事情, 很多人把它弄得很麻烦,给外人的感觉:你们.NET跨平台开发好不成熟,好麻烦哦. ..................................... ...

  5. PHPer 为什么会被 Javaer 鄙视？

    最近看了知乎上的一个话题 「在工作中,为什么 Java 程序员常常瞧不起 PHP 程序员?」 个人从业多年,用过的后端语言 ASP.ASP.NET.Java.PHP.Node.js.Python,如果 ...

  6. 考分鄙视(exam)

    考分鄙视(exam) 题目描述 Whence这个学期考了n次试,每一次都有一个0-20000之间的整数分数.Whence本来的状态应该是每一次考试都比前一次多一分(除第一次),但由于他很不稳定,偏差可 ...

  7. 不想再被鄙视？那就看进来！ 一文搞懂Python2字符编码

    程序员都自视清高,觉得自己是创造者,经常鄙视不太懂技术的产品或者QA.可悲的是,程序员之间也相互鄙视,程序员的鄙视链流传甚广,作为一个Python程序员,自然最关心的是下面这幅图啦 我们项目组一值使用 ...

  8. 不会git的程序员，会不会被鄙视？

    昨天一朋友在微信上问了我一个问题,我觉得很有趣,于是将本次聊天的内容分享给大家. 我朋友说,如果一个程序员不会使用 git,会不会被别人觉得低一个档次? 事先声明啊,这与公司技术栈无关,不要说有些公司 ...

  9. 强烈鄙视那些：自己完全不用android手机，却在做android开发的人

    前言: 最近参加android技术交流会,看到几个同时用mac和iphone的人,以为他们是全栈工程师(android和ios都会) , 谁知道交流下来,居然只是做android开发的,ios根本不会 ...

随机推荐

  1. Linux 查看某个用户的进程

    Linux 查看某个用户的进程 To view only the processes owned by a specific user, use the following command: top ...

  2. flash memory

    数据删除不是以单个的字节为单位而是以固定的区块为单位(注意:NOR Flash 为字节存储.),区块大小一般为256KB到20MB. 由于其断电时仍能保存数据,闪存通常被用来保存设置信息,如在电脑的B ...

  3. 模式对话框里的CheckedChanged事件

    问题:   模式对话框里的CheckedChanged事件不被触发: 解决方法: 一.先不直接showModalDialog出要的页面,而是要放一个中单页面 window.showModalDialo ...

  4. mac使用wget下载网站（仿站）

    wget -c -r -np -k -L -p http://www.xxxx.com 参考 wget的安装 http://blog.csdn.net/ssihc0/article/details/7 ...

  5. [译] ASP.NET 生命周期 – ASP.NET 上下文对象（五）

    ASP.NET 上下文对象 ASP.NET 提供了一系列对象用来给当前请求,将要返回到客户端的响应,以及 Web 应用本身提供上下文信息.间接的,这些上下文对象也可以用来回去核心 ASP.NET 框架 ...

  6. 【BZOJ 1103】 [POI2007]大都市meg

    Description 在经济全球化浪潮的影响下,习惯于漫步在清晨的乡间小路的邮递员Blue Mary也开始骑着摩托车传递邮件了.不过,她经常回忆起以前在乡间漫步的情景.昔日,乡下有依次编号为1..n ...

  7. 一道简单的IOS面试题-b

    题目: (参考:陈曦 包子的iOS开发)我在code review的时候,发现了某个viewController中有这样一段代码,觉得很不妥当,请尝试找出代码中的任何问题,或者可以优化的部分. -(i ...

  8. （五）乱入之如何使用MNIST数据库

    (五)乱入之如何使用MNIST数据库 今天花了整整一天时间查各种资料,终于搞清楚了怎么使用MNIST数据库.哈哈,MNIST,是不是高端洋气上档次?是不是不知道是什么东东? MNIST是一个据说很出名 ...

  9. CI中获取读操作的结果集行数+获取写操作的影响行数

    本质:读操作,用mysql_num_rows函数,写操作用mysql_affected_rows函数 mysql_num_rows() 返回结果集中行的数目.此命令仅对 SELECT 语句有效.要取得 ...

  10. Android：监听ListView

    本文目录 监听ListView点击事件 监听ListView滚动事件 监听ListView点击事件 使用监听器OnItemClickListener package com.example.tests ...