其中 temp.jpg 尺寸为 277×57Firefox 下的正常表现:
IE6 下的非正常表现:
很明显地可以看到 IE 中,li 的表现高度,并非我们设定的 57px,而是比其要高,这是因为 img 下面多出了 5px 的空白。
解决方法 一使 li 浮动,并设置 img 为块级元素
- ul{
- width: 280px;
- }
- ul li{
- float:left;
- display:block;
- height:57px;
- width:277px;
- }
- img{
- display: block;
- }
复制代码 解决方法 二设置 ul 的 font-size:0;
- ul{
- width: 280px;
- font-size: 0;
- }
- ul li{
- display:block;
- height:57px;
- width:277px;
- }
复制代码 解决方法 三设置 img 的 vertical-align: bottom;
- ul{
- width: 280px;
- font-size: 0;
- }
- ul li{
- display:block;
- height:57px;
- width:277px;
- }
- img{
- vertical-align:bottom;
- }
复制代码 解决方法 四设置 img 的 margin-bottom: -5px;
- ul{
- width: 280px;
- font-size: 0;
- }
- ul li{
- display:block;
- height:57px;
- width:277px;
- }
- img{
- margin-bottom: -5px;
- }
复制代码可以下载
demo来看