如何實(shí)現(xiàn)IE6下塊級(jí)元素的內(nèi)容自動(dòng)收縮
來源：程序員人生 發(fā)布時(shí)間：2013-11-12 08:09:04 閱讀次數(shù)：2742次
近期在做提示層組件的開發(fā)，遇到了一個(gè)IE6常見的bug....想出了幾個(gè)解決的辦法，挺有意思的，這里分享給大家。
由于IE6瀏覽器中，display:inline-block只能觸發(fā)IE的haslayout屬性使得元素具有布局屬性，當(dāng)對(duì)div元素使用display:inline-block，div元素仍然為塊狀布局而占據(jù)一行。
那么如何在IE6下使得塊級(jí)元素的內(nèi)容自動(dòng)收縮呢？開發(fā)圓角小提示層模塊，讓它來解答這個(gè)問題。
結(jié)構(gòu)和樣式：
/**
* @name : prompt
* @explain : 圓角小提示層
* @type : 基類
* @dependent : 無
* @author : peunzhang
* @version : 2012.9.6
* @html :
<!-- 圓角小提示層 [[ -->
<div class="prompt">
<span class="ico-layer-arrow-up"><!-- 上指示圖標(biāo) --></span>
<a href="#" class="ico-close-gold" title="關(guān)閉">關(guān)閉</a>
<div class="prompt-main">
<div class="prompt-cnt"><a href="#">這里輸入內(nèi)容</a></div>
</div>
</div>
<!-- 圓角小提示層 ]] -->
*/
.ico-layer-arrow-up,.prompt-main,.prompt-cnt,.ico-close-gold{display:inline-block;background:url(https://img.tenpay.com/res/wallet_v2/global/img/global.png?v=20120913) no-repeat;_background:url(https://img.tenpay.com/res/wallet_v2/global/img/global_png8.png?v=20120913) no-repeat;vertical-align:middle;overflow:hidden;}
.prompt{position:absolute;padding:5px;font-size:12px;line-height:12px;font-family:5B8B4F53;}
.prompt .ico-layer-arrow-up{position:absolute;top:0;left:12px;background-position:-41px -27px;}
.prompt .prompt-main{padding-left:7px;height:20px;background-position:-150px -501px;}
.prompt .prompt-cnt{padding-right:18px;height:20px;line-height:20px;line-height:21px9;white-space:nowrap;vertical-align:top;background-position:right -501px;color:#7C6103;white-space:nowrap;}
.prompt .prompt-cnt a{color:#7C6103;}
.prompt .prompt-cnt a:hover{color:#0099FF;}
.prompt .ico-close-gold{position:absolute;top:12px;right:12px;}
雪碧圖的一角：
打開IE6瀏覽器，展現(xiàn)如下，寬度并不能自動(dòng)收縮（這里瀏覽器窗口寬度被縮小到400px）
經(jīng)過不斷的測(cè)試，使用以下3種方法可以解決該bug
解決辦法1：把span元素替換div元素，span元素設(shè)置display:inline-block呈行塊布局，具有自動(dòng)收縮的效果
<div class="prompt">
<span class="ico-layer-arrow-up"><!-- 上指示圖標(biāo) --></span>
<a href="#" class="ico-close-gold" title="關(guān)閉">關(guān)閉</a>
<span class="prompt-main">
<span class="prompt-cnt"><a href="#">這里輸入內(nèi)容</a></span>
</span>
</div>
解決辦法2：針對(duì)IE6瀏覽器，給最外層的div元素設(shè)置寬度：_width:1%，使得最外層的寬度自動(dòng)收縮
解決辦法3：針對(duì)IE6瀏覽器，觸發(fā)塊級(jí)元素的haslayout屬性，并設(shè)置display:inline可使得塊級(jí)屬性呈現(xiàn)行塊布局模式，詳細(xì)可看《display:inline-block下的IE元素》
.prompt-main,.prompt-cnt{_zoom:1;_display:inline;} 模塊開發(fā)完成，實(shí)現(xiàn)了內(nèi)容自動(dòng)收縮，根據(jù)實(shí)際的場(chǎng)景而選擇最佳的使用方法，這里采用了第一種方案，優(yōu)點(diǎn)是不寫任何hack，缺點(diǎn)是可擴(kuò)張性不佳。
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
