IE下img多餘5像素空白解決方案

來源:互聯網
上載者:User
最近地實踐中,越來越覺得 li 元素中包含 a img 元素的時候會比較麻煩,需要注意,當然,問題還是一如既往的出現在 IE 下

最近地實踐中,越來越覺得 li 元素中包含 a img 元素的時候會比較麻煩,需要注意,當然,問題還是一如既往的出現在 IE 下。以下為其中一例:
HTML
<ul>
<li><a href=http://www.blue1000.com/wschool/wdesign/CSS/20090611/><img src="http://www.blue1000.com/wschool/wdesign/css/20090611/img/temp.jpg" alt="" /></a></li>
<li><a href=http://www.blue1000.com/wschool/wdesign/CSS/20090611/><img src="http://www.blue1000.com/wschool/wdesign/css/20090611/img/temp.jpg" alt="" /></a></li>
<li><a href=http://www.blue1000.com/wschool/wdesign/CSS/20090611/><img src="http://www.blue1000.com/wschool/wdesign/css/20090611/img/temp.jpg" alt="" /></a></li>
<li><a href=http://www.blue1000.com/wschool/wdesign/CSS/20090611/><img src="http://www.blue1000.com/wschool/wdesign/css/20090611/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 的空白。
使 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;
}
 



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。