如果给图片的父元素设置背景色，则图片的底部就会多出几像素，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. 【分析】Parcelable的作用

    一.介绍 1.Parcelable是一个接口,可以实现序列化. 2.序列化的作用体现在:可以使用Intent来传递数据,也可以在进程建传递数据(IPC). 3.Parcelable在使用的时候,有一个 ...

  2. freemarker string= null

    在java代码中经常会出现以下代码: String name; …………………… if(null == name || name.length == 0){ return; } 这行代码用freema ...

  3. Spring中的IOC\DI\AOP等概念的简单学习

    IoC(Inversion of Control,控制反转).这是spring的核心,贯穿始终, 所谓IoC,对于spring框架来说,就是由spring来负责控制对象的生命周期和对象间的关系.Spr ...

  4. Mysql 根据时间戳、时间按年月日分组统计

    create_time时间格式 SELECT DATE_FORMAT(create_time,'%Y%u') weeks,COUNT(id) COUNT FROM role GROUP BY week ...

  5. vim ---- 一键自动indent的命令

    当用vim拷贝某一段代码到另一个程序的时候,往往indent会有一些问题.. 下面这个强大的命令能够让你一键让代码有很好的格式. gg=G 例子:         

  6. 长沙市轨道交通工程BIM应用招标公告

    摘要: 长沙市轨道交通集团有限公司对其长沙市轨道交通3号线一期工程建筑信息模型(BIM)技术应用项目进行国内公开招标 长沙市轨道交通集团有限公司对其长沙市轨道交通3号线一期工程建筑信息模型(BIM)技 ...

  7. 使用OpenCV&&C++进行模板匹配.

    一:课程介绍 1.1:学习目标 学会用imread载入图像,和imshow输出图像. 用nameWindow创建窗口,用createTrackbar加入滚动条和其回调函数的写法. 熟悉OpenCV函数 ...

  8. bookstore网上书店测试缺陷报告2

    Bookstore网上书店系统测试缺陷报告   缺陷编号 01.01.0002 发现人 吴赵昕 记录日期 2016-06-10 所属模块 购物车 确认人 吴赵昕 确认日期 2016-06-10 当前状 ...

  9. 极路由访问Apple Store可以浏览但是不能下载的解决方案

    最近在家里上网突然发现Apple Store不能更新了.重启路由器发现最开始一会是能下载更新的,但是过了一会就完全不能下载更新了.很是奇怪,今天特意分析了一下这个问题. 首先,抓包确定Apple St ...

  10. Html 开发工具 之Hbulider

    下载地址 : 百度搜索该名字即可 或 点击此处 选择  文件->新建Web项目 输入项目名称即可  如下图 它会自动生成一些 文件夹 或文件,不需要的删除即可.