在火狐浏览器和谷歌浏览器（qq浏览器，谷歌内核）bug类似这张图：

img的高度是190*127

但是放到li中，li并没有设置高度，却和内部的图片之间上下错位。

若强行给li设置高度127，他和img依旧不能重合。虽然肉眼看不出来。

解决这个问题有如下三种方法：

一、设置li的font-size：0；

如果你很幸运，布局中li里边不需要放文字的话，那么就可以这么用了。

二、设置img的vertical-align：去掉集成的样式或者覆盖设置为top

在我这里出现这个问题，是因为img继承了公用样式，其vertical-align：middle；

我发现后将其关掉，就没有问题了。

为了后期也不会出现这个问题，最好单独再设置一个vertical-align：middle；来覆盖掉。

三、设置img的display：block；

这个也是一劳永逸的方法，毕竟设置了block，img还是会随父元素的宽度自适应（如果你的页面需要响应的话）。

完美~

2017-07-06  11:05:20

css - 三种方法解决LI和内部Img的上下间距问题的更多相关文章

  1. 三种方法解决android帮助文档打开慢

    三种方法解决android帮助文档打开慢   经查是因为本地文档中的网页有如下两段js代码会联网加载信息,将其注释掉后就好了 <link rel="stylesheet" h ...

  2. 设置css三种方法的优先级

    有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...

  3. 三种方法解决 Failed to start LSB: Bring up/down networking 问题

    感谢朋友支持本博客.欢迎共同探讨交流.因为能力和时间有限,错误之处在所难免.欢迎指正! 假设转载.请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  4. LeetCode: Spiral Matrix II 解题报告-三种方法解决旋转矩阵问题

    Spiral Matrix IIGiven an integer n, generate a square matrix filled with elements from 1 to n2 in sp ...

  5. 三种方法教你HTML实现点击某一个元素之外触发事件

    HTML实现点击某一个元素之外触发事件 大致编写的HTML界面渲染后是这个样子的,我们现在想要实现的需求是点击Button所在的div不会触发事件,而在点击Button所在的div之外的区域时会触发事 ...

  6. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  7. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  8. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  9. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

随机推荐

  1. 深入理解Java虚拟机 -- 读书笔记（1）：JVM运行时数据区域

    深入理解Java虚拟机 -- 读书笔记:JVM运行时数据区域 本文转载:http://blog.csdn.net/jubincn/article/details/8607790 本系列为<深入理 ...

  2. Ubuntu下，dpkg安装出错的修复

    参考 http://www.khattam.info/2009/08/04/solved-subprocess-pre-removal-script-returned-error-exit-statu ...

  3. Entity Framework表拆分

    一.概念 表拆分:一个表拆分成多个实体,例如Photograph表,可以拆分为Photograph和PhotographFullImage两张表. Photograph实体结构: using Syst ...

  4. Session 的生命周期

    #region EntityMap /// <summary>        /// 实体类值的访问器,线程安全        /// </summary>        // ...

  5. MATLAB 安装使用libsvm详细步骤

    根据本文后面部分博友提出的在配置过程中出现的问题,其中需要特别强调的一点:整个过程,都是在 libsvm-3.12\matlab目录下操作的.如果这一点你忽视了,你不可能解决配置中报的Bug,即使重新 ...

  6. 【转】 web 测试使用的chrome插件

    1.二维码插件 https://chrome.google.com/webstore/detail/%E4%BA%8C%E7%BB%B4%E7%A0%81qr%E7%A0%81%E7%94%9F%E6 ...

  7. openfire url get提交 中文乱码问题

    原因是它只接受url编码后的中文 如:%E7%BC%96%E7%A0%81%E5%90%8E%E7%9A%84%E4%B8%AD%E6%96%87 会自动转变为:http://127.0.0.1:90 ...

  8. mssql占用80端口解决办法

    services.msc

  9. C# 属性事件一些设置说明

    大致列举一些常用的属性或事件的一些修饰 用法类似,主要是对属性的进一步设置 [Browsable(true)] public bool Enable {get;set;} 顺便说一下事件的应用: pu ...

  10. Python 出现错误 SNIMissingWarning: An HTTPS request has been made, but the SNI (Subject Name Indication) extension to TLS is not available on this platform.

    报出SNIMissingWarning和InsecurePlatformWarning警告. 解决方法: 在cmd中输入: pip install pyopenssl ndg-httpsclient  ...