图片专题，rem布局导致的问题

Question

一张活动图，切成3张，然后使用rem布局，

<div class="bg1"></div><div class="bg2"></div><div class="bg3"></div>

.bg1{

background:url(图片地址)
height: 3rem;background-size: cover;

}

然后在安卓机上会出现分割线，

不知道大家一般对这种专题，是如何做的

Answer 1

最后还是采用rem布局，但是对每张图片进行了margin-top:-0.05rem解决分割线问题

Answer 2

没碰到过类似的需求，分享下处理思路吧。

1. 出分隔线这种，第一怀疑是否做了CSS Reset，如果做过，可以去看下相关元素的初始值，没做那就做下试试吧。
2. 也可以用多背景，都写到一个元素里
3. 或者试试SVG，移动端基本不用考虑它的兼容性问题

Answer 3

出现这种问题一般是由于部分安卓机子上无法识别带有小数的px单位导致，由于rem单位转换是根据html根节点的字体大小来设置，可以改变一下rem适配方案，不再手动编写viewport标签，而是调整为用js来控制viewport标签中的scale属性值，这样在转换的时候就不会出现带有小数的像素单位。

参考蚂蚁金服的高清屏幕适配方案：https://gw.alipayobjects.com/...

Answer 4

不知道你说的分割线是怎样的，没图哇，我自己找来看，和你的又不一样，按你代码只能看出，要是你图片不是height：3rem,然后你设置了height:3rem，这样造成图片没显示完整，和下面的图片自然对接不上了，就会造成有分割线的样子。建议用图片吧，你1张图片切3张，没必要用背景，用图片直接设置个width:100%就可以，其它让他自适应！

Answer 5

把容器的font-size设为0 试试