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
css - 三种方法解决LI和内部Img的上下间距问题的更多相关文章
- 三种方法解决android帮助文档打开慢
三种方法解决android帮助文档打开慢 经查是因为本地文档中的网页有如下两段js代码会联网加载信息,将其注释掉后就好了 <link rel="stylesheet" h ...
- 设置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代码结构: <div class ...
- HTML5结合CSS的三种方法+结合JS的三种方法
HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...
随机推荐
- 关于pthread_cond_wait使用while循环判断的理解
在Stevens的<Unix 环境高级编程>中第11章线程关于pthread_cond_wait的介绍中有一个生产者-消费者的例子P311,在进入pthread_cond_wait前使用w ...
- java中volatile关键字的含义<转>
在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...
- JavaScrip——对话框的简单应用(判断isNaN)
综合运用 isNaN的用法:判断是不是一个合法的数字类型,是数字返回false,不是返回true 1.我们用prompt来接收输入的内容 2.通过isNaN来做判断 3.最后用alert输出结果 &l ...
- centsos各个版本的区别
CentOS-7.0-1406-x86_64-DVD.iso 标准安装版,一般下载这个就可以了CentOS-7.0-1406-x86_64-NetInstall.iso ...
- scp基本使用方法
scp基本使用方法: scp用于在两台电脑之间进行数据的copy,形式如下: 第一种, scp [-r] 文件/文件夹 user@host:dir ,需要输入密码. 第二种, scp [-r] ...
- Java中上传文件和表单数据提交如何保持数据的一致性?
学生申请学科竞赛活动,表单中有学科竞赛的申报信息和部分附件,需要做到将上传文件和表单数据提交保持一致性. 将上传文件和插入表单数据放到事务汇总去处理,由于表单的数据我们可以控制,但是上传的文档不好控制 ...
- VMware 14 Pro 安装 CentOS 7
今年准备好好学习一下.NET CORE了,那也是得学习Linux.然后又得学习更多,咬着牙干吧... 1.Vmware虚拟机安装 在windows平台,首先咱们得先安装Vmware虚拟机,步骤省略,一 ...
- 04 memory structure
本章提要--------------------------------------------------SGA: System Global Area ( 包括background process ...
- 关于Cocos2d-x属性和引用
在HelloScene.h文件里面的Private定义一个Size类型的变量visibleSize,然后在HelloScene.cpp里面引用HelloScene.h,再在HelloScene::in ...
- SVN版本冲突,导致出现Files 的值“ < < < < < < < .mine”无效。路径中具有非法字符。
SVN版本冲突,导致出现Files 的值“ < < < < < < < .mine”无效.路径中具有非法字符. 右键编辑.... 打开并删除含有'<&l ...