img与器皿下界限的间隙(间隙) 的处理方式

2021-03-14 00:36 jianzhan

难题叙述:

IE7下 img与div(block种类元素)下界限有间距(或叫间隙、间隙)。

IE7才会有这个难题,IE8下是沒有的。

 

处理计划方案:

宝贝1:界定照片img标识vertical-align:bottom,vertical-align:middle,vertical-align:top。

img{vertical-align:bottom;} 
 
宝贝2:界定器皿里的字体样式尺寸为0。
div {
width:110px;
border:1px solid #000000;
font-size:0
}
 
听说缘故:
照片文本等inline元素默认设置是和父级元素的baseline对齐的,而baseline又和父级底边有1定间距(这个间距和 font-size,font-family 有关),因此设定 vertical-align:top/bottom/text-top/text-bottom 都可以以免这类状况出現。并且不仅li,别的的block元素中包括img也会有这个状况。