img圖片元素下多余空白解決方案_Div+CSS教程
在進(jìn)行頁面的DIV+CSS排版時(shí),遇到IE6(當(dāng)然有時(shí)Firefox下也會(huì)偶遇)瀏覽器中的圖片元素img下出現(xiàn)多余空白的問題絕對(duì)是常見的對(duì)於 該問題的解決方法也是「見機(jī)行事」,根據(jù)原因的不同要用不同的解決方法,這里把解決直接把解決image圖片布局下邊的多余空隙的BUG的常用方法歸納, 供大家參考。
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)語義和層次清晰,難免要通過IDE提供代碼縮進(jìn)顯示,這必然 會(huì)讓標(biāo)簽和其他標(biāo)簽換行顯示,比如說DW的「套用源格式」命令。所以說這個(gè)方法可以供我們了解出現(xiàn)BUG的一種情況,具體解決方案的還得各位見招拆招了。
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- DIVCSS實(shí)例教程:一款清新風(fēng)格的CSS新聞列表制作
- 網(wǎng)頁中表單常見問題解決辦法
- WEB2.0標(biāo)準(zhǔn)教程:第五天head區(qū)的其他設(shè)置
- DIV CSS網(wǎng)頁布局與WEB標(biāo)準(zhǔn)的討論與閑扯
- CSS如何制作一張圖片多種狀態(tài)的圖象翻轉(zhuǎn)菜單?
- CSS實(shí)戰(zhàn)經(jīng)驗(yàn):靈活運(yùn)行注釋帶來的益處
- CSS模塊化思想 有效管理CSS樣式
- Div CSS三列布局最先顯示中列的方法
- WEB2.0標(biāo)準(zhǔn)教程:第一天選擇什么樣的DOCTYPE
- DIV+CSS實(shí)現(xiàn)放大鏡效果的分頁樣式
猜你也喜歡看這些
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- CSS中以圖片替換文字的表現(xiàn)方法
- CSS背景圖片background-image須注意路徑問題!
- CSS網(wǎng)站風(fēng)格設(shè)計(jì)實(shí)例HuDong123
- CSS菜單實(shí)例:按鈕效果跳躍的藍(lán)色精靈
- CSS布局實(shí)例:CSS標(biāo)簽切換代碼實(shí)例教程
- 實(shí)現(xiàn)三列布局相同高度的解決辦法
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- CSS布局教程:用DIV CSS實(shí)現(xiàn)國內(nèi)經(jīng)典式三行兩列布局
- DIVCSS布局實(shí)例:DIV CSS新聞列表制作
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-img圖片元素下多余空白解決方案。