當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  建站經(jīng)驗(yàn) >  正文

如何解決圖片元素img在IE6下出現(xiàn)多余空白的問題

 2009-04-28 09:41  來源:   我來投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過

在進(jìn)行頁(yè)面的DIV+CSS排版時(shí),遇到IE6(當(dāng)然有時(shí)Firefox下也會(huì)偶遇)瀏覽器中的圖片元素img下出現(xiàn)多余空白的問題絕對(duì)是常見的對(duì)于該問題的解決方法也是“見機(jī)行事”,根據(jù)原因的不同要用不同的解決方法,這里把解決直接把解決image圖片布局下邊的多余空隙的BUG的常用方法歸納,供大家參考。方法整理來源于萬福的網(wǎng)絡(luò)。

1、將圖片轉(zhuǎn)換為塊級(jí)對(duì)象

即,設(shè)置img為:

display:block;

在本例中添加一組CSS代碼:

#sub img {display:block;}

2、設(shè)置圖片的垂直對(duì)齊方式

即設(shè)置圖片的vertical-align屬性為“top,text-top,bottom,text-bottom”也可以解決。如本例中增加一組CSS代碼:

#sub img {vertical-align:top;}

3、設(shè)置父對(duì)象的文字大小為0px

即,在#sub中添加一行:

font-size:0;

可以解決問題。但這也引發(fā)了新的問題,在父對(duì)象中的文字都無法顯示。就算文字部分被子對(duì)象括起來,設(shè)置子對(duì)象文字大小依然可以顯示,但在CSS效驗(yàn)的時(shí)候會(huì)提示文字過小的錯(cuò)誤。

4、改變父對(duì)象的屬性

如果父對(duì)象的寬、高固定,圖片大小隨父對(duì)象而定,那么可以設(shè)置:

overflow:hidden;

來解決。如本例中可以向#sub中添加以下代碼:

width:88px;height:31px;overflow:hidden;

5、設(shè)置圖片的浮動(dòng)屬性

即在本例中增加一行CSS代碼:

#sub img {float:left;}

如果要實(shí)現(xiàn)圖文混排,這種方法是很好的選擇。

6、取消圖片標(biāo)簽和其父對(duì)象的最后一個(gè)結(jié)束標(biāo)簽之間的空格。

這個(gè)方法要強(qiáng)調(diào)下,在實(shí)際開發(fā)中該方法可能會(huì)出亂子,因?yàn)樵趯懘a的時(shí)候?yàn)榱俗尨a更體現(xiàn)語(yǔ)義和層次清晰,難免要通過IDE提供代碼縮進(jìn)顯示,這必然會(huì)讓標(biāo)簽和其他標(biāo)簽換行顯示,比如說DW的“套用源格式”命令。所以說這個(gè)方法可以供我們了解出現(xiàn)BUG的一種情況,具體解決方案的還得各位見招拆招了。

文章來自:www.cn8f.com

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

  • 站長(zhǎng)網(wǎng)播報(bào):OpenSSL重大漏洞詳解 史上最糟糕的瀏覽器IE6死亡

    1.詳解OpenSSL重大漏洞:誰(shuí)會(huì)受影響?如何解決?近日有研究人員公布,廣為流行的網(wǎng)絡(luò)加密軟件OpenSSL存在名為Heartbleed的重大漏洞,人們的賬號(hào)密碼、信用卡號(hào)碼等個(gè)人信息可能會(huì)失竊。各大主流網(wǎng)站都在加緊解決這一問題。究竟是什么回事呢?普通網(wǎng)民是否會(huì)受到影響呢?國(guó)外媒體近日就這類疑問一

  • 陪伴我們13年的微軟XP離開了 XP用戶該何去何從?

    時(shí)間總是匆匆流去,但回憶,永遠(yuǎn)存在。陪伴我們走過了13年的微軟WindowsXP系統(tǒng)于今日正式“退休”。雖然還可以繼續(xù)使用,但安全風(fēng)險(xiǎn)問題重重。13年,從襁褓中的幼兒走向了成熟到最后的離去,雖然這個(gè)過程僅用了13年,但對(duì)于系統(tǒng)來說,XP可謂是史上服務(wù)最久的系統(tǒng)。面對(duì)著XP的退去,據(jù)媒體報(bào)道現(xiàn)在還將有

  • IE6下是否能正常顯示你的站點(diǎn) 如何解決兼容問題

    關(guān)于站點(diǎn)模板在ie瀏覽器中的兼容情況,蘭州網(wǎng)站建設(shè)在之前的影響網(wǎng)站用戶體驗(yàn)的因素中提及過,這幾天在回訪一些友鏈、同行站點(diǎn)時(shí)還是發(fā)現(xiàn)一些同樣的問題,包括wordpress和emblog的一些主題模板也是,即站點(diǎn)在ie7、8中顯示正常,但在ie6中確是有javascript腳本錯(cuò)誤和css

    標(biāo)簽:
    XP用戶
    IE6死亡
  • 網(wǎng)頁(yè)設(shè)計(jì)師為何要鏟除IE6這個(gè)老妖精

    最近很多網(wǎng)頁(yè)設(shè)計(jì)師想鏟除IE6.0這個(gè)老妖精,因?yàn)樵O(shè)計(jì)師們發(fā)現(xiàn)在應(yīng)用DIV+CSS切圖時(shí),IE6老是和設(shè)計(jì)師作對(duì),明明在高版本IE8.0和IE7.0甚至FireFox里面沒有問題的頁(yè)面,跑到IE6.0里面卻經(jīng)常出現(xiàn)錯(cuò)位、移動(dòng)、不能顯示等現(xiàn)象。所以大家義憤填膺,一致聲討要鏟除IE6.0這個(gè)老

    標(biāo)簽:
    XP用戶
    IE6死亡
  • Google 加入反IE6聯(lián)盟

    Google宣布,從2010年3月1日起,GoogleDocs和GoogleSites將不再支持IE6。Google在其官方博客中寫道:很多公司都停止支持IE6等舊瀏覽器,我們也將從GoogleDocs和GoogleSites開始加入這一行列。從3月1日起,這些產(chǎn)品中的某些重要功能在這些舊瀏覽器中

    標(biāo)簽:
    XP用戶
    IE6死亡

熱門排行

信息推薦