移动端img下方出现1像素空隙怎么解决？

Question

用div包裹img，img负责撑开div，Chrome仿真缩小比例会导致img下方出现一条细小的缝隙，且在iPhone7，小米note等真机上也会出现！！！

Chrome截图：

真机截图：

html结构：

<div class="w">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506693681554&di=3a2f103706fe85de1bab64f0891d852c&imgtype=0&src=http%3A%2F%2Fp3.wmpic.me%2Farticle%2F2016%2F01%2F04%2F1451874125_hQRgXEqF.jpg" alt="">
</div>
<div class="w">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506693681554&di=3a2f103706fe85de1bab64f0891d852c&imgtype=0&src=http%3A%2F%2Fp3.wmpic.me%2Farticle%2F2016%2F01%2F04%2F1451874125_hQRgXEqF.jpg" alt="">
</div>
<div class="w">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506693681554&di=3a2f103706fe85de1bab64f0891d852c&imgtype=0&src=http%3A%2F%2Fp3.wmpic.me%2Farticle%2F2016%2F01%2F04%2F1451874125_hQRgXEqF.jpg" alt="">
</div>

css代码：

html,
body {
  margin: 0;
}
.w {
  font-size:0;
  padding: 0;
  margin: 0;
  overflow:hidden;
  font-size: 0;
}
img {
  max-height: 100%;
  max-width: 100%;
  margin:0;
  // 更改img为block，无法解决问题
  display:block;
  // 不更改display属性，按照如下属性也无法解决问题
  line-height: 0;
  vertical-align:top; // 或者bottom
}

注意：

1. 外层div的font-size已经设置为0；
2. img已经设置为block，line-height为0；
3. Chrome上不缩放比例不会出现空隙；
4. 只在某系机型上出现，iPhone plus系列，大屏小米机会出现，小米6，iPhone7 plus等不出现；

这个问题天猫活动页也有这个问题：天猫活动页

真机截图：

codepen的演示地址：codenpen

如何消除这个大约1像素的空隙？

这种现象的原因是什么？

个人猜想可能和viewport相关，但是找不到资料···
关于解决方案：

万不得已可以margin-top: -1px;，另外在meta里设置content width大一点也能缓解问题。

Answer 1

加个 margin-top:-1px 来 hack 一下

.w {
        font-size: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
        font-size: 0;
        margin-top: -1px;
    }

效果如下：

在别的机型即使没有这个 bug，向上偏移 1px 也不会有丝毫影响，所以我觉得这样 hack 没毛病。

至于具体产生原因，我也不太清楚，去谷歌 github 开源项目看了一下 V8 和 Chrome 相关的，好像没有搜到相关 issure。

已经邀请了@justjavac，不知道大佬会不会找到问题相关源码或答案解析解答一番。?

老外跟你遇到了一样的问题，不知道老外解决没有：

请点击stackoverflow查看

Answer 2

我昨天做项目的时候也碰到了，最简单的方法，你给img加上display:block;就可以解决这个问题了

Answer 3

实际项目里有遇到过，解决方法就是：

margin-top: -1px;

Answer 4

这是因为img标签前后有空格,把div的font-size设零就行了

Answer 5

-你附带的天猫那个活动地址里面，给列表里的 a 标签内的 img 加上 display:block; 即可。

-你 codepen 里的没问题啊。（block元素不用line-height:0; font-size:0）

---

更新：

1·可以对出现该问题的手机使用 chrome 远程调试（你上面说的情况中有安卓设备，可使用），查看计算结果，以便排除问题。
参考：远程调试移动设备

2.你可以尝试把你 codepen 里的图片换成 3倍于当前尺寸的图片，看一下是否有该问题。

Answer 6

有好几种解决办法

1. display: block; margin: auto;
2. vertical-align: middle;

Answer 7

这个我显示富文本切片图的时候遇到过，我给图片添加了一行css解决了`
img {vertical-align: bottom;}

Answer 8

这个问题只有在屏幕缩放时出现，你是缩放屏幕了吗？

Answer 9

这个是webkit的bug,firfox应该就不会。

Answer 10

不过<img width="100%" height="100%" src=""/>,这样基本不会有间隔啊，要不尝试下

Answer 11

1. html head中添加

   <meta name="viewport" content="width=device-width">

   在安卓上缩放时会有白线

2. margin-top: -1px;最好的解决方案

Answer 12

display:block