img在網頁中直接放的話,底部會有一個很小的縫隙,解決方法
第一,給圖片img標簽display:block。
img{display:block}
第二,定義容器里的字體大小為0。
div {
width:110px;
border:1px solid #000000;
font-size:0
}
第三,定義圖片img標簽vertical-align:bottom,vertical-align:middle,vertical-align:top
img{vertical-align:bottom}
其他還有把圖片下邊距設為負值和改寫HTML標簽的排列。我覺得前三種就完全可以解決了。
造成圖片在IE下與容器下邊界有空隙的原因
圖片文字等inline元素默認是和父級元素的baseline對齊的,而baseline又和父級底邊有一定距離(這個距離和 font-size,font-family 相關,不一定是 5px),所以設置 vertical-align:top/bottom/text-top/text-bottom 都可以避免這種情況出現。而且不光li,其他的block元素中包含img也會有這個現象。
至于這里的HTML屬性align=”center”(對于圖片瀏覽器會處理成align=”middle”),就相當于vertical-align:middle; 所以道理也是一樣的,只要vertical-align不取baseline,這個空隙就消失了。