如果给图片的父元素设置背景色，则图片的底部就会多出几像素，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. Linux/Unix 线程同步技术之互斥量(1)

    众所周知,互斥量(mutex)是同步线程对共享资源访问的技术,用来防止下面这种情况:线程A试图访问某个共享资源时,线程B正在对其进行修改,从而造成资源状态不一致.与之相关的一个术语临界区(critic ...

  2. oracle全文索引

    1.检查数据库是否具有全文检索功能(这是针对已经建成使用的数据库) 查看用户中是否存在ctxsys用户,查询角色里是否存在ctxapp角色.以上两个中的1个不满足(不存在),则说明没有装过全文检索功能 ...

  3. C++笔试题

    平时学术必须用Python多啊,但校招笔试绕不开语言基础,非cs科班小弱临阵整理些C++题备考.很弱很苦逼... 一.指针 1.二维数组指针 #include<stdio.h> int m ...

  4. Bzoj索引

    1001 : http://ideone.com/4omPYJ1002 : http://ideone.com/BZr9KF1003 : http://ideone.com/48NJNh1004 : ...

  5. MySQL日期时间函数大全 转

    DAYOFWEEK(date)  返回日期date是星期几(1=星期天,2=星期一,……7=星期六,ODBC标准)mysql> select DAYOFWEEK('1998-02-03');  ...

  6. Win10/UWP开发—使用Cortana语音与App后台Service交互

    上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...

  7. PC端和手机访问调用不同的页面，JS和PHP不同方法

    js方法: var urlqr = location.href;    urlqr = urlqr.replace(/iphoneF_/, "pc")这里写正则替换页面地址 if( ...

  8. mongo链接solr的过程与问题

    我的环境: 1:ubunt 16 2:mongodb 2.6.1 3:solr 6.3 4:JDK 1.8 准备过程: 1:安装mongo-connector #pip install mongo-c ...

  9. .net web端导出Excel个人的看法

    //对已有方法进行重写 public override void VerifyRenderingInServerForm(Control control) { } //设置文件名 string fil ...

  10. Matlab中fread函数的高级使用方法及其帮助文档中容易引起歧义的地方

    参考资料:http://cn.mathworks.com/help/matlab/ref/fread.html 注意:参考资料针对的Matlab版本号R2015a,我使用的是R2013b. Matla ...