三种方法解决LI和内部Img的上下间距问题

简介: 在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图:img的高度是190*127但是放到li中,li并没有设置高度,却和内部的图片之间上下错位。若强行给li设置高度127,他和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

 

 

 

 

 

 

 

 

 

目录
相关文章
|
7月前
|
搜索推荐
img标签上title与alt属性的区别是什么?
img标签上title与alt属性的区别是什么?
208 0
|
2月前
|
搜索推荐
<img>标签上的 title 属性与alt 属性的区别
<img>标签上的 title 属性与alt 属性的区别
191 0
|
4月前
|
前端开发
如何消除li和ul之间的空隙、如何使div中的内容居中
这篇文章介绍了如何美化网页元素,包括设置登录页面的模糊背景效果,使用CSS的`opacity`属性;以及如何使`div`中的内容水平居中,通过设置`margin: auto;`。此外,还讲解了如何消除`li`和`ul`之间的空隙,通过将`ul`和`li`的`padding`和`margin`设置为0。
如何消除li和ul之间的空隙、如何使div中的内容居中
|
7月前
|
搜索推荐 前端开发 UED
元素的alt和title属性相关细节知识
元素的alt和title属性相关细节知识
|
7月前
|
数据采集 算法 前端开发
img标签中的title和alt属性有什么区别
img标签中的title和alt属性有什么区别
46 0
ul li 的属性值 去掉li的圆点
ul li 的属性值 去掉li的圆点
|
编解码 前端开发 JavaScript
img标签中的srcset属性有什么用?
img元素的srcset属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。 也就是说,我们不需要使用JavaScript也可以实现分辨率自适应。
390 0
|
Web App开发 前端开发
给Img标签设置height和width属性
给Img标签设置height和width属性
714 0