IMG图片下面出现空格、下边距的解决办法
放图片的时候总有一个间隔,加上div看,是图片未充满div。最后父级元素加了一个 font-size:0,去掉了间隔。
<div class="cut-img" style="font-size:0;">
<img src="data:images/bg_dot.png" class="center-img"></img>
</div>
详情:
http://blog.csdn.net/yourlin/article/details/42024665
在不同浏览器下图片下面会出现莫名的下边距,经测算在FF中 下边距大概是多出了3像素左右,而IE6更多,在IE8中展示却是完好的,以往的做法只需要将img定义为块状级就解决了问题;
但其原理是:图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关 的。所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。
如果将图片的垂直对齐方式设置为 top 或 bottom,我们会发现这个空隙也会消失。
行内元素的格式化实际上比我们想像的要复杂得多,这也是我至今不愿面对的一个知识点。还好它并不常用。
ps: 解决办法给img定义vertical-align或者定义为块状,最优的解决办是定义vertical-align,注:定义vertical- align为middle时在IE6中大概还有一像素的顶边距,最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零,font-size:0。
解决方法:
1.将img块状化 ul li img{display:block;}
2.将img左浮动 ul li img{float:left;}
3.为img添加样式 ul li img{vertical-align:top|bottom|text-top|text-bottom;}
4.为img的父级加高度 ul li{height:120px;}
5.为img的父级加样式 ul li{font-size:0;}
最新文章
- MyEclipse web项目导入Eclipse,详细说明
- Android 隐式意图激活另外一个Actitity
- C++函数模版
- Java——交通灯
- cdoj 92 Journey tarjan/lca 树上点对距离
- [Gauss]POJ1222 EXTENDED LIGHTS OUT
- 注解 @RequestMapping
- “ORA-12545: 因目标主机或对象不存在,连接失败”怎么办?
- ncsim仿真VHDL
- LeeCode-Same Tree
- ORA-00923: 未找到要求的 FROM 关键字
- 快速排序原理、复杂度分析及C语言实现
- Mac使用nginx+rtmp服务器
- Eureka服务注册中心
- memcached安装、使用
- 开启windows的 admin+开启tel+电源+远程功能
- javascript数据加减问题
- dataTable之自定义按钮实现全表 复制 打印 导出 重载
- Java中splite的用法与小技巧
- eclipse怎样检出SVN项目
热门文章
- iOS TableView索引字体大小设置
- DataUml Design 介绍8-DataUML 1.2版本正式发布(支持SQLite数据库、NetUML开发框架)
- Yarn源码分析之MRAppMaster:作业运行方式Local、Uber、Non-Uber
- php 使用curl 将文件上传
- 学习spring2--跟我一起学Spring 3(3)–使用Spring开发第一个HelloWorld应用
- A Survey of Shape Feature Extraction Techniques中文翻译
- Hibernate使用Log4j日志记录(使用properties文件)
- windows中控制台窗口和普通窗口有什么区别?
- c语言之linux下gettimeofday函数windows替换方案
- cobbler 更换dns和dhcp服务器为dnsmasq