IE中img多出5px的空白解决4种方法

p_可爱王

p_可爱王

2016-02-20 00:04

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享IE中img多出5px的空白解决4种方法吧。

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

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

html

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
ullia href="#"img src="img/temp.jpg" alt="" //a/lilia href="#"img src="img/temp.jpg" alt="" //a/lilia href="#"img src="img/temp.jpg" alt="" //a/lilia 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 下的正常表现:
demo-ff
IE6 下的非正常表现:
demo-ie
很明显地可以看到 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;

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
ul{width: 280px;font-size: 0;}ul li{display:block;height:57px;width:277px;}img{margin-bottom: -5px;}
展开更多 50%)
分享

猜你喜欢

IE中img多出5px的空白解决4种方法

Web开发
IE中img多出5px的空白解决4种方法

IE6图片img下出现多余空白的解决方法

Web开发
IE6图片img下出现多余空白的解决方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

解决腹泻的5种方法

电脑网络
解决腹泻的5种方法

img图片下多余空白的BUG解决方案

Web开发
img图片下多余空白的BUG解决方案

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

IE6图片元素img下出现多余空白的问题

Web开发
IE6图片元素img下出现多余空白的问题

IE6图片元素img下出现多余空白问题

Web开发
IE6图片元素img下出现多余空白问题

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

IE7和FF浏览器中右下角图片广告

IE7和FF浏览器中右下角图片广告

如何关闭Win7更新时“是否安装并更新”提示

如何关闭Win7更新时“是否安装并更新”提示
下拉加载更多内容 ↓