《
img圖片元素下多余空白解決方案》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335N2013.htm
--> [
網(wǎng)站建設(shè)之]img圖片元素下過(guò)�？杖苯鉀Q計(jì)劃
在進(jìn)行頁(yè)面的DIV+CSS排版時(shí)，碰到IE6（當(dāng)然有時(shí)Firefox下也會(huì)偶遇）閱讀器中的圖片元素img下呈現(xiàn)多余空白的問(wèn)題相對(duì)是常見(jiàn)的對(duì)於 該問(wèn)題的解決辦法也是「見(jiàn)風(fēng)使舵」，依據(jù)起因的不同要用不同的解決方法，這里把解決直接把解決image圖片布局下邊的多余縫隙的BUG的常用方法演繹， 供大家參考。
1、將圖片轉(zhuǎn)換為塊級(jí)對(duì)像
即,
IIS日志分析工具之EXCEL數(shù)據(jù)透視表，設(shè)置img為：
display:block,
iframe應(yīng)用技巧 保留垂直滾動(dòng)條去掉水平滾動(dòng)條;
在本例中增加一組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;
可以解決問(wèn)題,
IE盒子模型和標(biāo)準(zhǔn)W3C盒子模型。但這也引發(fā)了新的問(wèn)題,
IE的有條件注釋優(yōu)點(diǎn)和缺點(diǎn)，在父對(duì)像中的文字都無(wú)奈顯示。就算文字局部被子對(duì)像括起來(lái)，設(shè)置子對(duì)像文字大小仍然可以顯示，但在CSS效驗(yàn)的時(shí)候會(huì)提醒文字過(guò)小的過(guò)錯(cuò)。
4、轉(zhuǎn)變父對(duì)象的屬性
假如父對(duì)象的寬、高固定,
IE瀏覽器的Css if hack條件語(yǔ)法操作，圖片大小隨父對(duì)像而定,
IE瀏覽器Css if hack條件語(yǔ)法操作說(shuō)明，那麼可以設(shè)置：
overflow:hidden;
來(lái)解決。如本例中可以向#sub中添加以下代碼：
width:88px;height:31px;overflow:hidden;
5、設(shè)置圖片的浮動(dòng)屬性
即在本例中增長(zhǎng)一行CSS代碼：
#sub img {float:left;}
如果要實(shí)現(xiàn)圖文混排，這種方式是很好的抉擇,
ie中的flash出現(xiàn)激活框“單擊以激活并使用此控件”的解決方法。
6、撤消圖片標(biāo)簽跟其父對(duì)象的最後一個(gè)停止標(biāo)簽之間的空格,
IE與FF不兼容網(wǎng)頁(yè)布局CSS問(wèn)題。
這個(gè)方法要強(qiáng)調(diào)下，在實(shí)際開(kāi)發(fā)中該方法可能會(huì)出亂子,
IE8中text-align center偏左的解決辦法，由于在寫(xiě)代碼的時(shí)候?yàn)榱俗尨a更體現(xiàn)語(yǔ)義和檔次清楚，未免要通過(guò)IDE供給代碼縮進(jìn)顯示，這必定 會(huì)讓標(biāo)簽和其余標(biāo)簽換行顯示，比方說(shuō)DW的「套用源格局」命令。所以說(shuō)這個(gè)方法可以供咱們懂得涌現(xiàn)BUG的一種情形，詳細(xì)解決方案的還得各位見(jiàn)招拆招了。 Tag：空白 解決方案 元素 圖片 ,
IE6絕對(duì)定位的bug及其解決辦法; 空白 解決方案 元素 圖片
(責(zé)任編輯：網(wǎng)站建設(shè))
img圖片元素下多余空白解決方案相關(guān)文章