IE img过剩5像素空白处理方式

日期:2020-10-27 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

嗯,开场先胡扯几句不有关地感言。近期的工作中让我有了许多实践活动的机遇,另外也让我获得颇丰。在群里闲聊的情况下也提到过,全部的学习培训全过程,最好是是基础理论-实践活动-再基础理论-再实践活动。。。的1个循环系统往复式的全过程。这里说的基础理论是个较为宽泛地定义,在其中包含书籍基础理论,也包含对实践活动地总结。仅有基础理论沒有实践活动,常常导致好高骛远,想得好,做得差;只1味地实践活动却堵塞过基础理论地学习培训和总结,看起来仿佛忙繁忙碌,到头来会两手空空。

近期地实践活动中,愈来愈感觉 li 元素中包括 a img 元素的情况下会较为不便,必须留意,自然,难题還是1如既往的出現在 IE 下。下列为在其中1例:
html

拷贝编码
编码以下:

<ul>
<li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
</ul>

css

拷贝编码
编码以下:

ul{
width: 280px;
}
ul li{
display:block;
height:57px;
width:277px;
}

在其中 temp.jpg 规格为 277×57

Firefox 下的一切正常主要表现:
 
IE6 下的非一切正常主要表现:
 
很显著地能够看到 IE 中,li 的主要表现高宽比,并不是大家设置的 57px,而是比其要高,这是由于 img 下面多出了 5px 的空白。
处理方式 1
使 li 波动,并设定 img 为块级元素

拷贝编码
编码以下:

ul{
width: 280px;
}
ul li{
float:left;
display:block;
height:57px;
width:277px;
}
img{
display: block;
}

处理方式 2
设定 ul 的 font-size:0;

拷贝编码
编码以下:

ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}

处理方式 3
设定 img 的 vertical-align: bottom;

拷贝编码
编码以下:

ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}
img{
vertical-align:bottombottom;
}

处理方式 4
设定 img 的 margin-bottom: ⑸px;

拷贝编码
编码以下:

ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}
img{
margin-bottom: ⑸px;
}