bsie彌補(bǔ)了Bootstrap對IE6的不兼容。Bootstrap是 twitter.com 推出的非常棒的web UI工具庫。
目前，bsie能在IE6上支持大部分bootstrap的特性，可惜，還有一些實在無法支持...
下面的這個表格就是當(dāng)前已經(jīng)被支持的bootstrap的組件和特性：
組件 特性-----------------------------------------------------------grid fixed, fluidnavbar top, fixednav list, tabs, pillsdropdown dropdown (two level)buttons button, group color, size, dropdown-button, (disable state is not dynamic)form default, horizontal, inline, all controls, validation statetables hoverpagination alllabels allbadges allcode allmodal mosttooltip allpopover allalert alltypeahead allprogressbar mostmedia allwells allhero unit allicons allbootstrap/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補(bǔ)丁，這個文件中的大部分內(nèi)容無法寫入到 .less 文件中，并且必須緊跟在 bootstrap-ie6.css 之后在<head> 中引入。
js/bootstrap-ie.js :
這個javascript補(bǔ)丁文件用于解決一些純CSS無法完成工作。
bootstrap/img/glyphicons-halflings.png-8.png :
這個圖片文件是針對IE6的透明格式圖標(biāo)，是png 8bit格式的，顯示效果雖然并不是太好，但是也還可以接受。
bootstrap/less-ie6 :
這個目錄下是所有打過補(bǔ)丁的 .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 補(bǔ)丁文件 --> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css"> <!-- bsie 額外的 css 補(bǔ)丁文件 --> <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css"> <![endif]-->第2步，在html文檔結(jié)尾處加入以下的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 補(bǔ)丁只在IE6中才執(zhí)行 --> <script type="text/javascript" src="js/bootstrap-ie.js"></script> <![endif]-->第3步，根據(jù)你的情況，這一步是可選的：
IE6 注意： : 對每一個新加載的html片段都要調(diào)用 $.bootstrapIE6(el) 函數(shù)，其實主要就是指的通過ajax獲取到的html內(nèi)容
/** * 讓el容器中的的所有元素都能兼容IE6 */$.bootstrapIE6(el)目前在IE6下還不能支持tab控件的嵌套，主要是因為IE6不支持css的子選擇器
IE6 hack
_zoom:1;IE6-7 hack
*zoom:1;hasLayout (clear float):
.container { zoom:1; }其它能夠觸發(fā)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.
