css before、after兼容性问题

一、问题引入：

使用vant的步进器，同时页面又使用了rem作为度量单位，浏览器一直展示没问题，直到某天测试突然拿出一部安卓手机，说这里展示的不对

错误的展示.png

正常的展示应该是这样的

正确的展示.jpg

肯定是什么样式兼容性出问题了

二、问题排查：

通过chrome开发者工具，看到步进器的dom结构如下

dom结构.png

对应的css如下：

css样式.png

网上查了一下before、after的相关兼容性问题，果然有人遇到过，某些机型某些安卓系统下，before、after中的0.01rem不展示的问题

三、解决方案：

那么改成0.011rem试一下，果然就解决了！

踩过的坑发出来给大家参考一下，少走弯路