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
  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:[email protected]

Thanks.

时间: 2024-08-07 09:20:43

Bsie(鄙视IE)的相关文章

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

一般想做一些酷炫的网站都有个烦恼,那就是兼容ie浏览器,好在现在使用ie的也越来越少,微软也转战edge浏览器. 使用 Bootstrap经常用js插件可以模拟兼容旧版本的浏览器(bsie 鄙视IE),而且经常可以看到如下的代码: <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script sr

yiibooster+bsie

对于使用yii框架来说,如果使用bootstrap框架的话,现在有一个比较方便的使用途径:yiibooster.官网地址是:http://yii-booster.clevertech.biz/当然,我们都知道bootstrap几乎是不支持IE 6的.所以这时候,为了兼容IE6,还得冒出个:BSIE(鄙视IE),官方地址为:https://github.com/ddouble/bsie 有了这两样东西,开发起来是不是快了很多,至少你不用太关心页面是怎么做的了.而且变形,还没有那么夸张.更为可贵的是

被鄙视了,我要努力,目标集中为一个

明天ios基础班就要开课了,之前在群里面跟邹同学要了一些题目,他也住在智通公寓,要到他的地址,我就去他宿舍找他了. 两人相谈甚欢,才25岁,比我见识多多了,谈吐大方有水平,聊着聊着他QQ有人发试题给他了,我也想要试题,于是他考给我了 聊到我们宿舍,我说有两个抽烟的,回宿舍就是玩,根本不学啊,他说他们玩,我们不要玩,拼一个月看看.就一个月,一个月就知道结果,是不是这块料.不要抱怨环境,环境不应该是你妥协的借口. 我拿着移动硬盘上来,把试题考到我电脑上,发现好多不会的,他问我做完了没有,我说“好多不

程序员相爱相杀鄙视指南

有人的地方就有江湖.在互联网技术世界里,身为中流砥柱的程序员们,看似每天都坐在屏幕前,两耳不闻公司事,一心苦练编程功.殊不知,在“技术至上”的程序世界,早已暗波汹涌,一条条相爱相杀的鄙视链盘根错节,江湖的争斗久久未分出胜负…… 相信吃瓜群众都知道,编程语言是程序员的立身之本,然而,很少有人知道,不同的编程语言出自各派.功能不一,它更代表了程序员在江湖上的地位高低. 程序语言太复杂,一旦选不好,就会落入鄙视链的底层! 最心疼的还是PHP工程师,明明人家也是为公司奉献很多的,却遭到全体的鄙视. 如果

强烈鄙视那些:自己完全不用android手机,却在做android开发的人

前言: 最近参加android技术交流会,看到几个同时用mac和iphone的人,以为他们是全栈工程师(android和ios都会) , 谁知道交流下来,居然只是做android开发的,ios根本不会. 而且问他们平时用什么手机,回答都是:iphone. 还带着鄙视的语气说:android都是屌丝用的,不好用.心里顿时一万个草泥马:你tmd 既然这么鄙视 ,你为什么还做android开发,还靠android找工作. 为什么不去做ios开发??? 这种人,肯定水平不咋地. 只会装B 和 吹牛逼.因

我曾七次鄙视我的灵魂--纪伯伦

第一次,当它本可进取时,却故作谦卑: 第二次,当它在空虚时,用爱欲来填充: 第三次,在困难和容易之间,它选择了容易: 第四次,它犯了错,却借由别人也会犯错来宽慰自己: 第五次,它自由软弱,却把它认为是生命的坚韧: 第六次,当它鄙夷一张丑恶的嘴脸时,却不知那正是自己面具中的一副: 第七次,它侧身于生活的污泥中,虽不甘心,却又畏首畏尾. -------------------------------------- Seven times I have despised my soul: The fi

删分,作业做不来 实在搞不定了(不能让老外鄙视啊)请高手想求我!

============问题描述============ 使用加速度感应器, 让球不能穿过格子,我从java开发包里 用例子改了AccelerometerPlay. 现在做了个框架出来,不能让球穿过 我在图片上画的线.老师说一定要用圆心加上半径==线的坐标 才能保证球压线不动.但是怎么搞的不行 有高手请帮帮我不.问了好几遍老师了.我怕老师鄙视我们中国学生啊,高手救救我吧 CSDN不能把代码上传吧 留QQ  我把代码传给你 ,要是有人肯帮我的话 549113517 ============解决方案

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

写在前面的吐槽 原本跨平台开发很容易的事情, 很多人把它弄得很麻烦,给外人的感觉:你们.NET跨平台开发好不成熟,好麻烦哦. ................................................ 一.选择Linux版本 我们选择ubuntu 最新 lts版,理由如下: 1.官方长期维护; 2.ubuntu对于中国用户来讲更容易上手; 3.集成软件中心,常用软件应有尽有; 二.安装mono.monodevelop 打开软件中心,直接搜索这两个东西. 分别安装. 这时候m

鄙视自己(转)

我曾七次鄙视自己的灵魂, 第一次,当它本可进取时,却故作谦卑: 第二次,当它在空虚时,用爱欲来填充: 第三次,在困难和容易之间,它选择了容易: 第四次,它犯了错,却借由别人也会犯错来宽慰自己: 第五次,它自由软弱,却把它认为是生命的坚韧: 第六次,当它鄙夷一张丑恶的嘴脸时,却不知那正是自己面具中的一副: 第七次,它侧身于生活的污泥中,虽不甘心,却又畏首畏尾. 原文地址:https://www.cnblogs.com/zhengweizhao/p/9158717.html