css 图片底部空隙问题的解决方法

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:30 我要评论(0)

一、开篇

很久很久以前,我数过IE6的七大罪状(七个蛋疼的bug),原文IE6 Bug大盘点,看看你都遇到过哪些【更新中】,虽然IE6用户量在不断下降,但我们目前仍需要为那些执迷不悟者考虑,谁让用户是老大呢。好了,今天我就来列出IE6的第八大罪状:图片底部空隙问题,欲了解出解决方案,请往下看吧。

二、症状表现

昨天在改版网站首页时,准备将推荐博客那栏用博主头像显示,并在图片周围加了1px的边框,css教程代码如下:

代码如下

复制代码

#blog_list span.blog_img { display: inline-block;padding:1px;border:#ddd solid 1px;margin-bottom:2px}#blog_list img{ width:78px; height:78px;}

本来觉得这个css肯定没问题的,但细心的我还是用IE6测试了一下,果断,令我悲催了,IE6下图片下方有点空隙出现,我没给图片加margin和padding啊,哪里来的空隙呢?真是纠结。

正常效果IE6下底部多了空隙

三、解决方案

没办法,寻找解决方案喽,其实也挺简单,有如下几种方案大家可以参考:

1、将img的display设置为block

2、讲img的父元素的font-size设置为0

3、设置img的vertical-align属性值为vertical-align:top | bottom |middle |text-bottom

四、总结

1、IE6早点去死吧!

2、还在用IE6的人赶紧改邪归正,不要再执迷不悟了,web designer 伤不起的啊!

3、兵来将挡,水来土掩,当我们遇到问题的时候要冷静,要淡定,多分析,少抱怨!

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...