怪异的移动端CSS问题之「神秘的白线条」
这是PC端的图：
这是移动端的图（使用PC端Chrome开发工具里的模拟手机功能，但实测真机上问题同样存在）
这是真实项目中的图：（上面两张图是我把真实项目中bug之外的要素全删的结果。）
看到中间的白线条了吗？ P.S. 项目里没用img标签，而是background-image。 很奇怪的问题。我通过调整div的height可以在某个值时消除此线条，但设计原因我又不能调整高度。 代码很简单，在这里【注意HTML里面的图片用的是Imgur的图床，因此可能翻墙才能展示。】 这个布局是有点奇怪，可能改变布局能解决此问题。但我现在非常想知道为什么移动端会出现这个问题？怎么造成的？
我做过的尝试：加背景色，会减轻白色线条影响，但仔细看，依旧是能看到白线的。 提前谢谢大家！
11 回复
图片的display属性默认inline,而这个属性的vertical-align的默认值是baseline vertical-align:middle; 或者父盒子diaplay:flex;
// css
body {
margin: 0;
}
#DIV_4 {
height: 578px;
background: rgba(0, 0, 0, 0) url(https://i.imgur.com/P9xxsyg.png) center
no-repeat;
}
// html
<div id="DIV_1">
<div id="DIV_4"></div>
</div>
上面的回复全部都不在点上, 真正的原因是, 图片适应屏幕时, 高度出现了小数点
比如一张图片 750x398的图片, 用rem自适应, { width: 7.5rem; height: 3.98rem; } 在6plus上浏览, 那么这张图片会被适应成 414 x 219.696
所以图片的高度尽可能在适应屏幕后, 不要出现小数, 就不会出现这个