如果给图片的父元素设置背景色，则图片的底部就会多出几像素，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中图片底部多出几像素问题的更多相关文章

  1. object在ie8与ie9中与下文多出几像素问题

    今天发现一个很古怪的问题,object与下面文字部分的间隔超过了30个像素,关系是不管用padding还是margin都是一样的效果: 给其设置overflow:hidden属性依然没有任何效果,再设 ...

  2. 拍照选择图片(Activity底部弹出)

    效果图如下: 第一步 : 显示出的布局文件:alert_dialog.xml <?xml version="1.0" encoding="utf-8"?& ...

  3. 【转】微信中MMAlert（半透明底部弹出菜单）的使用介绍

    原文地址:http://blog.csdn.net/singwhatiwanna/article/details/8892930 果大家时常用过微信或者用过iphone,就会发现有种从底部弹出的半透明 ...

  4. Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  5. Android ListView滑动过程中图片显示重复错乱闪烁问题解决

    最新内容建议直接访问原文:Android ListView滑动过程中图片显示重复错乱闪烁问题解决 主要分析Android ListView滚动过程中图片显示重复.错乱.闪烁的原因及解决方法,顺带提及L ...

  6. 一款jQuery打造的滚动条在底部滑出信息提示层

    一款jQuery打造的滚动条在底部滑出信息提示层, 当滚动鼠标滚轮,或者滚动条往下拉的时候,在右下角,弹出一个信息提示框. 有一点仿的是一个插件工具,就是网页中大家都长用到的友荐. 这款特效算一款简单 ...

  7. Android Demo---实现从底部弹出窗口

    在前面的博文中,小编简单的介绍了如何制作圆角的按钮以及圆角的图片,伴着键盘和手指之间的舞步,迎来新的问题,不知道小伙伴有没有这样的经历,以App为例,点击头像的时候,会从底部弹出一个窗口,有从相册中选 ...

  8. [转]chrome浏览器中 F12 功能的简单介绍

    本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...

  9. react-踩坑记录——页面底部多出一倍高度的空白

    挂载slider组件后页面底部多出一倍高度的空白,如下: slider组件内容⬇️: class Slider extends Component{ constructor(){ super(); } ...

随机推荐

  1. 开源BTS产品中存在多处漏洞，攻击者或可劫持手机通讯基站

    前言 在过去的几周时间里,我从多个方面对GSM的安全性进行了调查和研究,例如GSM通信协议中存在的漏洞.除此之外,我还对目前世界上应用最为广泛的BTS软件进行了安全审计.在这篇文章中,我将会给大家介绍 ...

  2. GridView导出excel格式问题

    在导出的点击事件中,代码如下: //指定导出对应单元格为文本样式 string style = @"<style> .test { vnd.ms-excel.numberform ...

  3. C++ Daily 《6》---- 类静态对象与函数静态对象

    C++ 的一个哲学基础是,你不应该为你使用的东西付出代价. class 拥有一个 static 成员,即使从未被用到,它也会被构造和析构: 而 函数拥有一个 static 成员, 如果这个函数从未被调 ...

  4. iOS—图片编辑,文字下落动画的Demo

    仿照Mac上的截图编辑功能做的一个图片编辑的Demo,功能有画矩形,圆形,箭头,手写,输入文字和分享. 做的时候看到一个大神的帖子写的一个文字动画的教程,故顺带学习做了一个类似的文字下落动画. 有兴趣 ...

  5. Isostorespy 数据库无法打开的解决方案

    重装Sql Server Compact http://download.microsoft.com/download/0/9/D/09D6ECB6-7F46-4B93-BB45-586A30A778 ...

  6. hash连接

    简单回顾嵌套循环: 两个表关联,较小的表(指使用了过滤条件后结果集较小的表)称为驱动表或者外表(,另一个称为内表.在嵌套连接过程中,oracle首先读取驱动表的第一条数据,然后和内表进行比对,所以匹配 ...

  7. SDK截图（三）：压缩位图之理论准备篇

    压缩位图我们使用简单的行程长度编码的方法,详情参考<windows程序设计>15章之DIB压缩. 在BITMAPINFOHEADER结构中有两个和位图压缩有关的字段,分别是biCompre ...

  8. 麦克斯韦方程组 (Maxwell's equation)的简单解释

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2016/12/12 以下会用高中的物理知识和大学微积分的数学知识对麦克斯韦方程组进行一个简单的解释.希望大家都能看得懂 ...

  9. CloudStack中云主机的UTC时间转为本地时间

    CloudStack项目中使用的时间是UTC时间,具体什么是UTC时间大家可以百度,但是我们需要的时间是正常的时间,所以在国泰君安开发测试云中,同步资源管理中虚拟机的同步管理,需要对虚拟机的时间格式化 ...

  10. cocos2d3.x在android下屏蔽多点触控

    ios上很简单的在AppController.mm里 [eaglView setMultipleTouchEnabled:YES] 设置为NO,就是单点触控了,无需更改cocos底层代码; andro ...