移動端0.5px實現過程入的坑---有的下邊框無法顯示

衆所周知在移動的端寫1px邊框，顯示出來的效果看起來比較粗，那麼下面介紹一種常見的0.5px 的實現方案；

利用css3的縮放方式實現，其原理是：transform:scale()來達到壓縮一半的目的。
html部分：

 <ul class="cardList" v-show="selected == 1">
       <li class="cardItem" v-for="(item, index) in debitList" :key="index">
             <img :src="bankImg(item.linkCode)"/><span>{{item.bankName}}</span>
        </li>
 </ul>

css3部分：

 .cardItem{
        height:99px;
        position: relative;
        border:none;
        display: flex;
        align-items: center;
      }
      .cardItem:after{
        position: absolute;
        content: '';
        bottom: 0;
        background: #E9E9E9;
        width: 750px;
        height:1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
      }

效果如上，咦！！！怎麼有的下邊框不見了呢？經過一番的摸索，發現原來是自己配置了px轉 rem導致，因此 cardItem:after中height:1px;會轉成相應的rem值，至於爲什麼導致有的下邊框無法顯示，個人還是沒想明白，在控制檯追蹤的時候，發現每個 cardItem:after 都是有相同的寬高，還望大神指點！

解決方案： css3中 .cardItem:after中的height值改成height:1px;/*no*/ ,設置/*no*/後就不會將px轉成rem了。