图片之间出现1px的分隔线?

Question

一个很简单的li列表,列表里面为宽为100%,display为block的图片,发现在iphone6等机型下显示正常,但是在nexus5x等机型上部分图片之间会出现1px的分隔线,猜测跟图片的高度和设备的dpr有关,请问应该怎么解决?
update:不用回答是font-size: 0,不是这个原因.注意是部分图片间有间隔,并且经过调整图片高度后,间隔有些情况下会消失

Answer 1

下面的图片margin-top: -1px;

Answer 2

图片容器样式加 font-size:0;

Answer 3

box-sizing:border-box

Answer 4

这问题我也碰到过，有些分辨率下是会出现这个问题，我能想到的方法是让图片上下重叠1个像素

Answer 5

img{width:100%;height:100%;}试一试。body{height:auto;}

Answer 6

可以给div加background-image属性解决所有img标签带来的问题；
缺点是不能自动撑开元素，图片尺寸需要预先设定

Answer 7

float：left 试一试

Answer 8

图片有时候就有这种问题，你在编辑器里别换行，把标签之间空隙干掉<div><img src="" alt=""></div>这样写

别这样写
div
<img src="" alt="">
</div>

不行就修改图片默认的vertical-align:baseline,改成vertical-align:bottom，让他跟div底部对齐

Answer 9

vertical-align: middle;或者font-size:0;，line-height:0也可以，如果图文混排，就只能选第一个。另外不建议图片设为 block

补充一下：只是强答，提问怎么也得给个在线的 demo 吧，jsbin 什么的都好，总不能靠猜……

Answer 10

outline:none;
border:none;
都试试

不行试试_display:inline