IE下img多余5像素空白解决方法

       嗯,开场先胡扯几句不相关地感言。最近的工作让我有了很多实践的机会,同时也让我收获颇丰。在群里聊天的时候也提到过,所有的学习过程,最好是理论-实践-再理论-再实践。。。的一个循环往复的过程。这里说的理论是个比较宽泛地概念,其中包括书本理论,也包括对实践地总结。只有理论没有实践,往往造成眼高手低,想得好,做得差;只一味地实践却不通过理论地学习和总结,看起来好像忙忙碌碌,到头来会两手空空。 

       最近地实践中,越来越觉得 li 元素中包含 a img 元素的时候会比较麻烦,需要注意,当然,问题还是一如既往的出现在 IE 下。以下为其中一例:

html
XML/HTML复制代码
  1. <ul>  
  2.  <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>  
  3.  <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>  
  4.  <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>  
  5.  <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>  
  6. </ul>  
css
CSS复制代码
  1. ul{   
  2.  width280px;   
  3. }   
  4. ul li{   
  5.  display:block;   
  6.  height:57px;   
  7.  width:277px;   
  8. }  
其中 temp.jpg 尺寸为 277×57

Firefox 下的正常表现:

IE6 下的非正常表现:

       很明显地可以看到 IE 中,li 的表现高度,并非我们设定的 57px,而是比其要高,这是因为 img 下面多出了 5px 的空白。
共1/2页   1  2  下一页  


上一篇:禁用viewstate在web.config里

下一篇:支付宝弹出效果的简洁版 

留下脚印压缩包密码:sosuo8
名字:
全部评论:
评论潘潘2009-6-30 20:14:00
  好帖子,受益非浅。 
  经测试,完全正确。 
  不过该问题在IE7.0版本以上该BUG已经解决。不过还有许多人在用IE6.0的版本。所以必须得到重视。
答复^-^
申明:本站部分文章来自网络,由于各种原因对文章的来源无从考究,如果您是“ IE下img多余5像素空白解决方法 ”的原作者,若侵犯您的版权,请与我联系!在此请您原谅我的幼稚和无知!联系方法:email:ahuinan@21cn.com  QQ:106494262

感谢以下网友对网站提出的建议:
1、感谢“蓝树叶kiss”网友发现一个评论漏洞。(2009-2-28)
2、感谢“陈臣”对程序优化和seo方面的建议。(2009-3-18)
文章档案
  • 作者:伴西红柿
  • 来源:前端观察
  • 日期:2009-6-11 23:56:00
  • 点击:1510
网友投票(您觉得这篇文章怎样?)
loadding...请稍侯......