img標(biāo)簽下多余空白BUG解決方法_Div+CSS教程
核心提示:根據(jù)原因的不同要用不同的解決方法,這里把解決直接把解決image圖片布局下邊的多余空隙的BUG的常用方法歸納,供大家參考。
在進(jìn)行頁面的DIV CSS排版時(shí),遇到IE6(當(dāng)然有時(shí)Firefox下也會(huì)偶遇)瀏覽器中的圖片元素img下出現(xiàn)多余空白的問題絕對(duì)是常見的對(duì)于該問題的解決方法也是“見機(jī)行事”。
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教程推薦
- CSS網(wǎng)頁布局時(shí)常犯的幾種小錯(cuò)誤
- DivCSS布局?jǐn)U展技巧和用法
- 標(biāo)題元素、段落和強(qiáng)制換行如何正確使用?
- DreamweaverCS3中的CSS布局規(guī)則
- CSS初始化代碼
- float和position屬性的區(qū)別和使用方法
- 如何實(shí)現(xiàn)hover懸停鏈接文字產(chǎn)生陰影?
- DIV CSS的XHTML代碼結(jié)構(gòu)淺談-不要真DIV CSS了
- 在WEB標(biāo)準(zhǔn)中嵌入Flash的最佳方法
- DuplicateCharactersBug在IE中的HTML注釋引起文字奇怪的復(fù)制
猜你也喜歡看這些
- 用css網(wǎng)站布局之十步實(shí)錄!(九)
- 如何用CSS實(shí)現(xiàn)翻頁效果?
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS布局實(shí)例:一個(gè)不錯(cuò)的表格樣式
- DIVCSS布局教程:應(yīng)用ul、li實(shí)現(xiàn)表格形式
- Web標(biāo)準(zhǔn)實(shí)戰(zhàn)CSS網(wǎng)頁布局豆瓣首頁
- CSS如何實(shí)現(xiàn)單行圖片與文字垂直居中?
- CSS布局教程:如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示?
- DIVCSS實(shí)例:橙藍(lán)互換的CSS翻頁效果
- CSS菜單:由CSS滑動(dòng)門技術(shù)實(shí)現(xiàn)的菜單十一款
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-img標(biāo)簽下多余空白BUG解決方法。