如果给图片的父元素设置背景色，则图片的底部就会多出几像素，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. JavaScript Module Pattern: In-Depth

    2010-03-12 JavaScript Module Pattern: In-Depth The module pattern is a common JavaScript coding patt ...

  2. C#中Invoke的用法(转)

    在多线程编程中,我们经常要在工作线程中去更新界面显示,而在多线程中直接调用界面控件的方法是错误的做法,Invoke 和 BeginInvoke 就是为了解决这个问题而出现的,使你在多线程中安全的更新界 ...

  3. CSS过滤器

    CSS过滤器(CSS filters)最初是为了向SVG矢量图提供不同的图片效果.现在,CSS filters 不在局限于在SVG中使用,也可以在图片.文字和其它元素上使用.CSS过滤器效果并不难理解 ...

  4. Java数组和C++异同

    一.定义和初始化 1.Jave定义和初始化: Java:两种方式 Type[]  A; Type A[]; 定义时不能指定数组的长度 静态初始化:   A = new Type[][Ele1,Ele2 ...

  5. OC calendar 实践中的那些坑

    博客已经迁移到www.chjsun.top 最近想做一个万年历似的东西,因为需要把农历也添加进去,就想直接调用苹果自带的api,这样还方便一些, 搜索了一下,苹果对于时间的处理,还是提供了很多选择给我 ...

  6. Intellj IDEA Java随笔

    敲击sout+Tab会出现:System.out.println(); int(-2147483648, 2147483647) 当一个方法类型不是void时,那么我们不仅要考虑它正确时的返回值,错误 ...

  7. DOM和IE中的 事件对象

    DOM中的事件对象:(符合W3C标准)    preventDefault()        取消事件默认行为    stopImmediatePropagation() 取消事件冒泡同时阻止当前节点 ...

  8. MVC 从后台页面 取前台页面传递过来的值的几种取法

      MVC 从后台页面 取前台页面传递过来的值的几种取法   <1>前台页面 Index视图 注意:用户名表单的name值为txtName 密码表单的name值为txtPassword & ...

  9. 8个超实用的jQuery技巧攻略

    1)禁用右键单击功能 如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能. <font><font>$(document).ready(function ...

  10. 折腾Ubuntu下的android studio

    ps:网速很慢,耗时一天多.先吐槽一下搭建很麻烦,毕竟现在在ubuntu上用as的人还不太多,很多步骤最好先自备梯子. 测试环境: ubuntu 14.04 LTS 64bit 安装的东西无非就是an ...