html清除图片上下间距,css - 三种方法解决LI和内部Img的上下间距问题

在火狐浏览器和谷歌浏览器(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

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

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

设置css三种方法的优先级

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

linux /proc/meminfo 文件分析(转载)

cat /proc/meminfo    读出的内核信息进行解释,下篇文章会简单对读出该信息的代码进行简单的分析. # cat /proc/meminfo MemTotal:     kB MemFr ...

MongoDB的ObjectId和基本操作增删改查(3)

ObjectId 基本操作增删改查 增: insert 介绍: mongodb存储的是文档,. 文档是json格式的对象. 语法: db.collectionName.insert(document) ...

android创建自定义控件

新建一个布局title.xml <?xml version="1.0" encoding="utf-8"?>

EF实体框架之CodeFirst八

前面七篇基本把Code First学习了一下,不过code first中会出现一个问题,就是数据迁移的问题. 一.数据准备 还是在前面的demo上修改,这次使用Province和City类. publ ...

System&period;Data&period;OracleClient&period;OracleConnection已过时

解决办法如下: 1.把原来的using System.Data.OracleClient;去掉 2.在oracle安装目录下找到Oracle.DataAccess.dll 添加引用:using Ora ...

Java C&num; 加密解密类库

Bouncy Castle 是一种用于 Java 平台的开放源码的轻量级密码术包.它支持大量的密码术算法,并提供 JCE 1.2.1 的实现.因为 Bouncy Castle 被设计成轻量级的,所以从 ...

HDU 1180 诡异的楼梯(BFS)

诡异的楼梯 Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Status ...

NET Core环境并创建运行ASP&period;NET网站

kungge 在Windows系统搭建.NET Core环境并创建运行ASP.NET网站 微软于6月27日在红帽DevNation峰会上 正式发布了.NET Core 1.0.ASP.NET 1.0和 ...

django----利用Form 实现两次密码输入是否一样 &lpar; 局部钩子和全局钩子 &rpar;

from django import forms # 导入表单模块 from django.core.exceptions import ValidationError class RegisterF ...

UVa-116 Unidirectional TSP 单向旅行商

题目 https://vjudge.net/problem/uva-116 分析 设d[i][j]为从(i,j)到最后一列的最小开销,则d[i][j]=a[i][j]+max(d[i+1][j+1], ...