css去除圖片下多餘空白區域
css去除<img>圖片下多餘空白區域
在進行頁面的DIV+CSS排版時,遇到IE6(當然有時Firefox下也會偶遇)瀏覽器中的圖片元素img下出現多餘空白的問題絕對是常見的對於該問題的解決方法也是“見機行事”。
1、將圖片轉換為塊級物件
設定img為“display:block;”。在本例中新增一組CSS程式碼:“#sub img {display:block;}”。
2、設定圖片的垂直對齊方式
設定圖片的vertical-align屬性為“top,text-top,bottom,text-bottom”也可以解決。如本例中增加一組CSS程式碼:“#sub img {vertical-align:top;}”。
3、設定父物件的文字大小為0px
在#sub中新增一行:“font-size:0;”可以解決問題。但這也引發了新的問題,在父物件中的文字都無法顯示。就算文字部分被子物件括起來,設定子物件文字大小依然可以顯示,但在CSS效驗的時候會提示文字過小的錯誤。
4、改變父物件的屬性
如果父物件的寬、高固定,圖片大小隨父物件而定,那麼可以設定“overflow:hidden;”來解決。如本例中可以向#sub中新增以下程式碼:“width:88px;height:31px;overflow:hidden;”。
5、設定圖片的浮動屬性
即在本例中增加一行CSS程式碼:“#sub img {float:left;}”。如果要實現圖文混排,這種方法是很好的選擇。
本文轉自許琴 51CTO部落格,原文連結:http://blog.51cto.com/xuqin/1263056,如需轉載請自行聯絡原作者
相關文章
- 一個自動去除行尾多餘空白的小外掛
- CSS去掉圖片底部的空白CSS
- 去除UITableView多餘的seperatorUIView
- Mac圖片區域性擦除工具Mac
- 迅雷精簡版 for Mac 去除多餘無用功能Mac
- source insight 儲存時刪除多餘空格,去除多餘空格 space tab鍵
- 去除冗餘 – 精簡您的CSS樣式程式碼CSS
- Python如何刪除字串中多餘空白字元?Python字串字元
- 仿SDWebImage多圖片下載Web
- excel怎麼多餘空格或非列印字元?Excel資料清洗函式Trim去除多餘空格及Clean去除列印字元Excel字元函式
- 圖片區域性識別怎麼操作
- CSS3 設定多個背景圖片CSSS3
- 005_HTML製作炫酷登入介面(CSS精靈圖、背景圖片區域性顯示)HTMLCSS
- 圖片下面出現空白怎麼解決
- vue點選空白區域,下拉選單隱藏Vue
- 跟著教程做主圖,教你輕鬆去除圖片背景!
- PHP陣列去除空白或重複元素PHP陣列
- 利用CSS改變圖片顏色的多種方法!CSS
- iOS 去除 TabBarItem的圖片預設顏色iOStabBar
- CSS把彩色圖片變為灰度圖片CSS
- 如何Super Vectorizer從Mac 上的影像中刪除多餘的顏色區域?Mac
- CSS背景圖片集中在同一個圖片CSS
- python中使用os模組的popen方法,去除輸出多餘的空行Python
- html2canvas將指定區域匯出為圖片(js將div匯出為圖片)HTMLCanvasJS
- OSPF協議的多區域配置,圖文講解協議
- 百度地圖繪製多邊形區域地圖
- 文字輪播與圖片輪播?CSS 不在話下CSS
- Flutter實現點選空白區域隱藏軟鍵盤Flutter
- 為什麼空白區域在網頁設計中重要網頁
- [Python]爬蟲獲取知乎某個問題下所有圖片並去除水印Python爬蟲
- CSS 來佈局圖片CSS
- CSS · 兩種背景圖片CSS
- CSS圖片濾鏡灰度CSS
- CSS圓形圖片效果CSS
- CSS 文字環繞圖片CSS
- 圖片輪播--純cssCSS
- 【CSS】圖片動畫特效(相框)CSS動畫特效
- css 背景圖片屬性CSS