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:   absolutefloat:      left | rightdisplay:    inline-blockwidth:      except 'auto'height:     except 'auto'zoom:       except 'normal'overflow:   hidden | scroll | autooverflow-x/-y: hidden | scroll | autoposition:   fixedmin-width:  any valuemax-width:  except 'none'min-height: any valuemax-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）相关推荐

html5标签兼容低版本浏览器
随着html5(后面用h5代表)标签越来越广泛的使用,IE不识别h5标签的问题让人很是烦恼. 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:block属性,就能让这个元 ...
提示用户升级浏览器代码低于ie9的浏览器提示
一般想做一些酷炫的网站都有个烦恼,那就是兼容ie浏览器,好在现在使用ie的也越来越少,微软也转战edge浏览器. 使用 Bootstrap经常用js插件可以模拟兼容旧版本的浏览器(bsie 鄙视IE) ...
yiibooster+bsie
对于使用yii框架来说,如果使用bootstrap框架的话,现在有一个比较方便的使用途径:yiibooster. 官网地址是:http://yii-booster.clevertech.biz/ 当然 ...
被字节跳动T4级大佬鄙视了：让你10倍提升认知效率，就这3个方法！
来源| 技术领导力(ID:jishulingdaoli) 国庆长假前,老K跟一位字节跳动T4级的大佬吃饭,聊到技术人如何快速提升认知的问题.我说,很简单啊,努力到无能为力,拼搏到感动自己......话 ...
程序员过年被亲戚鄙视：月薪1万5很一般，在大城市很难养活自己吧？
过年走亲访友本是一件值得高兴的事,然而一名程序员却讲述了自己被鄙视的经历.其自称月薪2万,但为了照顾大家感受,故意说月入1万5左右,结果反而本亲戚鄙视了一番,称这点工资很难在大城市里养活自己. 遇到这 ...
第六回严重鄙视360安全卫士
星期一,一个星期的开头,天气不算冷,公车里没有往日的密不透风,我还很幸运只站了一站就捡到了个最后一排靠窗的位置,这是我最喜欢的位置.总结出能捡到位置的办法,如果上车的时候没有空余的位置那就尽量往后靠吧 ...
学python工资高吗-我程序员年薪 80 万被亲戚鄙视不如在二本教书的博士生？
但是毕业后,在父母辈的眼里似乎只有公务员.律师.教师这三大铁饭碗是他们心中的最佳职业,我第一次跟我妈说我从事的是IT行业程序员,她回答道:那是修电脑的吗?然后程序员行业被外界吐槽似乎司空见惯了,今日刷 ...
为什么都要鄙视 PHP 程序员？ Java联盟百家号 07-24 21:43 前几天发表了一篇文章《图解:程序员之间是如何相互鄙视的？》，有人就在留言处留言。可以解释下：为什么都鄙视PHP工程师
为什么都要鄙视 PHP 程序员? Java联盟百家号 07-24 21:43 前几天发表了一篇文章<图解:程序员之间是如何相互鄙视的?>,有人就在留言处留言. 可以解释下:为什么都鄙视P ...
一直认为 count(1) 比 count(*) 效果高，被同事鄙视了。
今日推荐腾讯二面:@Bean 与 @Component 用在同一个类上,会怎么样?比 Xshell 还好用的 SSH 客户端神器,MobaXterm 太爱了!SpringBoot 如何统计.监控 S ...