chrome/ie中图片底部多出几像素问题
如果给图片的父元素设置背景色，则图片的底部就会多出几像素，chrome/IE/FF中均是如此，如下图：
代码如下，就是简单的div中放张图片：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
.container{background:green;width:400px;}
</style>
</head>
<body> <div class="container">
<img src="data:images/11.jpg" width="400" height="200">
</div> </body>
</html>
解决方法有两个：
img{display:block};
或（真正解决方法）
img{vertical-align:bottom}
效果如图，底部多出来的几像素消失了：
基线对齐
这其实是一个基线对齐问题，vertial-align: baseline(默认值)要求一个元素的基线（区别与底端）与其父元素的基线对齐。如果一个垂直元素没有基线，比如是一个图像、表单输入元素、其他替换元素，则该元素的底部与其父元素的基线对齐。这个对齐规则使一些Web浏览器总是把替换元素放在基线上，即使该行中没有其他文本。例如，假设一个表单元格中只有一个图像，这个图像可能实际在基线上，不过在某些浏览器中，基线下面的空间会导致图像下出现一段空白。
chrome/ie中图片底部多出几像素问题的更多相关文章
- object在ie8与ie9中与下文多出几像素问题
今天发现一个很古怪的问题,object与下面文字部分的间隔超过了30个像素,关系是不管用padding还是margin都是一样的效果: 给其设置overflow:hidden属性依然没有任何效果,再设 ...
- 拍照选择图片(Activity底部弹出)
效果图如下: 第一步 : 显示出的布局文件:alert_dialog.xml <?xml version="1.0" encoding="utf-8"?& ...
- 【转】微信中MMAlert（半透明底部弹出菜单）的使用介绍
原文地址:http://blog.csdn.net/singwhatiwanna/article/details/8892930 果大家时常用过微信或者用过iphone,就会发现有种从底部弹出的半透明 ...
- Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
- Android ListView滑动过程中图片显示重复错乱闪烁问题解决
最新内容建议直接访问原文:Android ListView滑动过程中图片显示重复错乱闪烁问题解决 主要分析Android ListView滚动过程中图片显示重复.错乱.闪烁的原因及解决方法,顺带提及L ...
- 一款jQuery打造的滚动条在底部滑出信息提示层
一款jQuery打造的滚动条在底部滑出信息提示层, 当滚动鼠标滚轮,或者滚动条往下拉的时候,在右下角,弹出一个信息提示框. 有一点仿的是一个插件工具,就是网页中大家都长用到的友荐. 这款特效算一款简单 ...
- Android Demo---实现从底部弹出窗口
在前面的博文中,小编简单的介绍了如何制作圆角的按钮以及圆角的图片,伴着键盘和手指之间的舞步,迎来新的问题,不知道小伙伴有没有这样的经历,以App为例,点击头像的时候,会从底部弹出一个窗口,有从相册中选 ...
- [转]chrome浏览器中 F12 功能的简单介绍
本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...
- react-踩坑记录——页面底部多出一倍高度的空白
挂载slider组件后页面底部多出一倍高度的空白,如下: slider组件内容⬇️: class Slider extends Component{ constructor(){ super(); } ...
随机推荐
- cookie 保存上次访问url方法
if (Session[Enums.UserInfoSeesion] == null) { HttpCookie cookie = Request.Cookies[Enums.UserLastAcce ...
- 2014年7月份第3周51Aspx源码发布详情
Froor高校校园网站源码 2014-7-18 [VS2010]源码介绍:这是一款有关高校门户网站的毕业设计源码,功能相对比较完善,界面也比较美观,对门户网站感兴趣的朋友们可以下载研究一下.该源码功 ...
- 到入百度LSS framework Reason: image not found
dyld: Library not loaded: @rpath/VideoCore.framework/VideoCore Referenced from: /var/containers/Bund ...
- jsp提交表单数据乱码,内置对象,以及过滤器
jsp提交表单数据乱码解决方案 通过form表单给服务器提交数据的时候,如果提交的是中文数据,那么可能会出现乱码,如果表单的请求方式是post请求,那么可以使用如下方案解决乱码: 在调用getPara ...
- HTML 30分钟入门教程
作者:deerchao 转载请注明来源 本文目标 30分钟内让你明白HTML是什么,并对它有一些基本的了解.一旦入门后,你可以从网上找到更多更详细的资料来继续学习. 什么是HTML HTML是英文Hy ...
- storm 源码笔记
(reify DistributedRPC$Iface (^String execute [this ^String function ^String args] (log-debug " ...
- Bzoj索引
1001 : http://ideone.com/4omPYJ1002 : http://ideone.com/BZr9KF1003 : http://ideone.com/48NJNh1004 : ...
- Intellj IDEA Java随笔
敲击sout+Tab会出现:System.out.println(); int(-2147483648, 2147483647) 当一个方法类型不是void时,那么我们不仅要考虑它正确时的返回值,错误 ...
- onTouch与onClick冲突解决方法
view.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent ...
- IOS一些高效的第三方框架库
MBProgressHUD ——进展指示符库 苹果的应用程序一般都会用一种优雅的,半透明的进度显示效果,不过这个API是不公开的,因此你要是用了,很可能被清除出AppStore.而 MBProgres ...