Bsie：讓 Bootsrap 相容 IE6-8 瀏覽器

2015-12-24    分類：CSS框架、Web應用開發、開源軟體、首頁精華2人評論發表於2015-12-24
boot瀏覽器

Bsie（鄙視IE）是一個能讓你的低版本IE（IE6-8）相容大部分Bootstrap功能的擴充套件庫，也許你覺得現在使用IE6是一種多麼無知的行為，但是現在很多企業應用確實還是需要IE的支援，那麼通過Bsie，IE使用者也可以享受到大部分Bootstrap的功能和UI。下面列出了Bsie相容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

Bsie相關檔案使用介紹

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例項介紹

在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;

軟體首頁 軟體文件 軟體下載

相關文章