準(zhǔn)備工作
LXUI IE6+ 以 Bsie 為基礎(chǔ)打造,在此非常感謝作者
ddouble 提供的非常棒的解決方案。
如何兼容IE6+
兼容IE6+除了LXUI基本的文件外,還需要引入其他兼容IE的文件。
LXUI IE6+目錄結(jié)構(gòu)如下:
LXUI/
├── image/ (圖片目錄)
├── css/
│ ├── lxui.css
│ ├── lxui.min.css
│ ├── lxui-ie6.css (兼容IE6+)
│ └── lxui-ie6.min.css (兼容IE6+)
├── js/
│ ├── lxui.js
│ ├── lxui.min.js
│ ├── lxui-ie.js (兼容IE6+)
│ └── lxui-ie.min.js (兼容IE6+)
├── fonts/ (字體圖標(biāo) IE6+ 不兼容)
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff
└── plugins/
如果你已引入了LXUI的框架,如果考慮兼容 IE6+,只需要引入 lxui-ie6.css 和 lxui-ie.js 文件即可。就這么簡(jiǎn)單。當(dāng)然,你可以優(yōu)先選擇引入 壓縮版 的文件。
兼容組件
雖然 Bsie 已經(jīng)可以讓大部分LXUI組件兼容IE6,但仍有部分無法實(shí)現(xiàn),以下我們整理出兼容ie6+的組件,還有...我們會(huì)持續(xù)更新,爭(zhēng)取兼容LXUI所有的組件及javascript事件。
柵格系統(tǒng)
柵格系統(tǒng)在IE6+是無法正常顯示的,所以選擇用替代方案解決,用 .span* 來取替 .col-md-*標(biāo)簽。
1
1
1
1
1
1
1
1
1
1
1
1
2
3
7
6
6
7
5
8
4
9
3
10
2
11
1
12
注意
柵格兼容方案不使用 .col-md*,而是使用 .span1-11。
柵格之間的距離是父層2%。
<div class="row">
<div class="span1">.span1</div>
<div class="span1">.span1</div>
<div class="span1">.span1</div>
<div class="span1">.span1</div>
<div class="span1">.span1</div>
<div class="span1">.span1</div>
<div class="span1">.span1</div>
<div class="span1">.span1</div>
<div class="span1">.span1</div>
<div class="span1">.span1</div>
<div class="span1">.span1</div>
<div class="span1">.span1</div>
</div>
<div class="row">
<div class="span8">.span8</div>
<div class="span4">.span4</div>
</div>
<div class="row">
<div class="span4">.span4</div>
<div class="span4">.span4</div>
<div class="span4">.span4</div>
</div>
文字段落
標(biāo)題 -
代碼參考h1. 我是一個(gè)標(biāo)題
font-size: 36px
h2. 我是一個(gè)標(biāo)題
font-size: 30px
h3. 我是一個(gè)標(biāo)題
font-size: 24px
h4. 我是一個(gè)標(biāo)題
font-size: 18px
h5. 我是一個(gè)標(biāo)題
font-size: 14px
h6. 我是一個(gè)標(biāo)題
font-size: 12px
列表 -
代碼參考陽(yáng)光下的泡沫,是彩色的
就像被騙的我,是幸福的
追究什么對(duì)錯(cuò),你的謊言,基于你還愛我
美麗的泡沫,雖然一剎花火
你所有承諾,雖然都太脆弱 但愛像泡沫,如果能夠看破,有什么難過
早該知道泡沫,一觸就破
就像已傷的心,不勝折磨
也不是誰的錯(cuò),謊言再多,基于你還愛我
美麗的泡沫,雖然一剎花火
你所有承諾,雖然都太脆弱
愛本是泡沫,如果能夠看破,有什么難過
把冰箱門打開
把大象放進(jìn)去
把門關(guān)上
累覺不愛
很累,感覺自己不會(huì)再愛了。
不明覺厲
雖然不明白是什么,但是感覺好厲害啊雖然不明白他(你)在說什么,但是感覺很厲害的樣子。
對(duì)于某技術(shù)高超者發(fā)表的見解表示贊嘆(褒義),或只是覺得對(duì)發(fā)表的見解不明所以的應(yīng)付(貶義)。
喜大普奔
喜聞樂見、大快人心、普天同慶、奔走相告。
表單
輸入框類型 -
代碼參考文本框
密碼框
多行文本框
<--
* 多行文本框在ie6下存在一些bug,所以為了保證正確樣式,需要按照下例編寫
* fieldset 和 div 標(biāo)簽必須添加
-->
<form role="form">
<div class="form-group">
<fieldset>
<div>
<textarea class="form-control" name="content"></textarea>
</div>
</fieldset>
</div>
</form>
注意
兼容ie6的 textarea必須按照上例層級(jí)添加 fieldset 和 div 標(biāo)簽
輸入框樣式 -
代碼參考輸入框 - 成功
輸入框 - 警告
輸入框 - 錯(cuò)誤
選擇文件(上傳) -
代碼參考默認(rèn)
其他樣式 選擇文件 選擇文件 選擇文件 選擇文件 選擇文件 選擇文件
單選/多選 -
代碼參考信曾哥考試不掛科
信春哥原地滿血復(fù)活
信春哥得永生
多個(gè)checkbox同行顯示
1 2 3
Select -
代碼參考輸入框組 -
代碼參考用戶名
.00
¥ .00
注意
在每個(gè) .input-group 后面追加 .clearfix 使輸入框組整行顯示。
復(fù)選框與單選框
注意
checkbox 的組合需要在 .input-group 的后面追加 .input-ie 好使復(fù)選框的輸入框組高度一致。
不使用 .col-* 來判斷寬度,因ie6限制,所以去掉,即可。 書寫代碼 和
輸入框組 代碼一致。
附加按鈕
帶下拉菜單的按鈕
注意
上例你已經(jīng)看到了,當(dāng)下拉菜單遇到input、select等,均被遮蓋,此問題是目前ie6的無解bug。我們會(huì)盡快搞定本bug問題。
按鈕
按鈕樣式 -
代碼參考默認(rèn)樣式
其他樣式
<--
* 默認(rèn)樣式不需要任何修改、其他樣式需要按照以下代碼格式修改才能保證樣式兼容性問題。
* 如果使用了 btn-theme1 樣式,請(qǐng)?jiān)?<button> 父層加入 <span> 標(biāo)簽并給予 .btn-**-ie 類名,為了使在 ie6 ~ ie11 樣式都兼容,默認(rèn)給了 <span> 上的 .btn-**-theme1 屬性 float:left ,所以使用時(shí)按鈕會(huì)左對(duì)齊,需要自行修改。
-->
<span class="btn-default-ie">
<button type="button" class="btn btn-default btn-theme1">默認(rèn)</button>
</span>
<span class="btn-primary-ie">
<button type="button" class="btn btn-primary btn-theme1">主要</button>
</span>
<span class="btn-success-ie">
<button type="button" class="btn btn-success btn-theme1">成功</button>
</span>
<span class="btn-info-ie">
<button type="button" class="btn btn-info btn-theme1">信息</button>
</span>
<span class="btn-warning-ie">
<button type="button" class="btn btn-warning btn-theme1">警告</button>
</span>
<span class="btn-danger-ie">
<button type="button" class="btn btn-danger btn-theme1">危險(xiǎn)</button>
</span>
注意
為了兼容IE6+,在使用 btn-theme1 的按鈕樣式時(shí)需要 在父層添加 span 標(biāo)簽,并且加上 .btn-**-ie 類。
按鈕組 -
代碼參考按鈕工具欄
按鈕組嵌套下拉菜單
下拉菜單
樣式 -
代碼參考圖標(biāo)
圖標(biāo)類型 -
代碼參考表格
表格樣式 -
代碼參考#id 姓名 性別 屬性
1 春哥 呃...女 原地滿血復(fù)活,附加屬性考試不掛科。
2 曾哥 呃...女 曾爺真英雄,鐵血泰史龍。
3 醬油男 男 被動(dòng)技能,醬油無視。
帶邊框表格
#id 姓名 性別 屬性
1 春哥 呃...女 原地滿血復(fù)活,附加屬性考試不掛科。
2 曾哥 呃...女 曾爺真英雄,鐵血泰史龍。
3 醬油男 男 被動(dòng)技能,醬油無視。
鼠標(biāo)懸停
#id 姓名 性別 屬性
1 春哥 呃...女 原地滿血復(fù)活,附加屬性考試不掛科。
2 曾哥 呃...女 曾爺真英雄,鐵血泰史龍。
3 醬油男 男 被動(dòng)技能,醬油無視。
緊縮表格
#id 姓名 性別 屬性
1 春哥 呃...女 原地滿血復(fù)活,附加屬性考試不掛科。
2 曾哥 呃...女 曾爺真英雄,鐵血泰史龍。
3 醬油男 男 被動(dòng)技能,醬油無視。
表格狀態(tài)
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
標(biāo)簽頁(yè)
基本樣式 -
代碼參考添加下拉菜單
導(dǎo)航條
如果在IE6+的導(dǎo)航條上增加搜索組件,需要單獨(dú)編寫css適配導(dǎo)航條。
基本樣式 -
代碼參考按鈕
文本
需要邀請(qǐng)注冊(cè)
路徑導(dǎo)航
基本樣式 -
代碼參考主頁(yè)
/
資源庫(kù)
/
/
數(shù)據(jù)源
<ol class="breadcrumb">
<li><a href="#">主頁(yè)</a></li>
<li>/</li>
<li><a href="#">資源庫(kù)</a></li>
<li>/</li>
<li class="active">數(shù)據(jù)源</li>
</ol>
注意
由于ie6+不支持 ::before 屬性,所以需要手動(dòng)增加分隔符號(hào),例如 / 或 |
分隔符號(hào)的 li 的class 名稱是 .delimiter
分頁(yè)
基本樣式 -
代碼參考禁用和激活狀態(tài)
翻頁(yè)
兩端對(duì)齊
標(biāo)簽
基本樣式 -
代碼參考我是標(biāo)題你看沒看到 New
我是標(biāo)題你看沒看到 New
我是標(biāo)題你看沒看到 New
我是標(biāo)題你看沒看到 New
我是標(biāo)題你看沒看到 New
我是標(biāo)題你看沒看到 New
可用的樣式
默認(rèn) 主要 成功 信息 警告 危險(xiǎn)
theme1 的樣式
默認(rèn) 主要 成功 信息 警告 危險(xiǎn)
<span class="label label-default">默認(rèn)></span>
<span class="label label-primary">主要></span>
<span class="label label-success">成功></span>
<span class="label label-info">信息></span>
<span class="label label-warning">警告></span>
<span class="label label-danger">危險(xiǎn)></span>
<!-- 使用theme1樣式只需要在父層添加 .label-theme1 即可 -->
<div class="label-theme1">
<span class="label label-default">默認(rèn)></span>
<span class="label label-primary">主要></span>
<span class="label label-success">成功></span>
<span class="label label-info">信息></span>
<span class="label label-warning">警告></span>
<span class="label label-danger">危險(xiǎn)></span>
</div>
注意,這里有點(diǎn)不一樣
ie6不支持同類定義css,所以需要在 <span> 父層加上 class 為 label-theme1 即可。當(dāng)然,你也不需要在 label-* 的后面添加 label-theme1 這個(gè)了。
警告框
基本樣式 -
代碼參考恭喜! 操作成功
稍等! 處理中...
警告! 請(qǐng)?zhí)顚懲暾筇峤?div style="height:15px;">
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
世界杯(FIFA World Cup)即國(guó)際足聯(lián)世界杯,是世界上最高榮譽(yù)、最高規(guī)格、最高含金量、最高知名度的足球比賽,與奧運(yùn)會(huì)并稱為全球體育兩大最頂級(jí)賽事,甚至是轉(zhuǎn)播覆蓋率超過奧運(yùn)會(huì)的全球最大體育盛事。
ie6不支持同類定義css,所以需要在 .panel 父層加上 class 為 panel-theme1 即可。當(dāng)然,你也不需要在 panel-* 的后面添加 label-theme1 這個(gè)了。
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Holy guacamole! Best check yo self, you're not looking too good.
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Monthly Average RainfallSource: WorldClimate.comTokyoNew YorkLondonBerlinJanFebMarAprMayJunJulAugSepOctNovDec050100150200250Highcharts.com