您当前的位置: 首页 > 前端教程 > CSS教程 > 图片IMG与容器下边界有空隙的解决方法

图片IMG与容器下边界有空隙的解决方法

作者:xiaoxiao 来源:未知 发布时间: 2014-07-24 18:11 点击:
第一,给图片img标签display:block。 img{display:block} 第二,定义容器里的字体大小为0。 div { width:110px; border:1px solid #000000; font-size:0 } 第三,定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top img{vertical-align

图片IMG与容器下边界有空隙的解决方法

  第一,给图片img标签display:block。

  img{display:block}

  第二,定义容器里的字体大小为0。

  div {

  width:110px;

  border:1px solid #000000;

  font-size:0

  }

  第三,定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top

  img{vertical-align:bottom}

  其他还有把图片下边距设为负值和改写HTML标签的排列。我觉得前三种就完全可以解决了。

  造成图片在IE下与容器下边界有空隙的原因

  图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一定是 5px),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象。

  至于这里的HTML属性align="center"(对于图片浏览器会处理成align="middle"),就相当于vertical-align:middle; 所以道理也是一样的,只要vertical-align不取baseline,这个空隙就消失了。

  相关

  1.ie的显示有几种模式,在html文档的开始部分声明<!DOCTYPE ....>

  如果声明为strict模式,ie以w3c的方式显示文档,而w3c的标准里面<img />默认是一个inline的标签,除非自己显式的声明为 block

  2.那个空隙是ie针对盒模型默认的line-height和font-size。 给img desplay:block;虽然能解决问题,但没从结构上来考虑。可谓治标不治本。
分享到:
本文"图片IMG与容器下边界有空隙的解决方法"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(2)
100%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4