小程序踩坑日记——(一)1rpx border ios真机显示不全问题

写在前面

    四个多月没更新了，中间辗转了几次，终于来到了自己比较心仪的公司，想想这跌跌撞撞的几个月，真的是起骑个车都能滑到的经历，也真的是够了╮(╯▽╰)╭。

        来到新公司相对体系较大，又是一波痛苦的经历，熟悉公司内部轮子的无力感，正在啃并且长期啃下去。本来计划今年写一个关于vue底层的学习系列笔记，但是由于没啥时间去研究学习，看样子最近是写不了了，不过来到公司啃xiang的同时，有幸终于有了自己梦寐以求的小程序做，开心的同时，又一弥天大xiang袭来，也许这就是人生吧╮(╯▽╰)╭。接下来几篇准备写一写自己目前经历过的啃xiang历程，这个系列也会伴随啃xiang路一直延续下去。

正文(￣▽￣)／

这次开发中遇到的印象最深刻的问题，就是在ios上1rpx border的边会莫名其妙消失，试了好多办法，都没有用，当时心情是这样的(╯‵□′)╯︵┻━┻，问题就是这样:

此处借用tiankf老哥的图

后来，无奈只好求助于度娘，结果找到了tiankf老哥，这老哥也遇到了这个问题，做了一番实验，实验样本如下（为什么想起了高中的物理实验）：

再次借用tiankf老哥的图

于是得到了一个结论：

当标签的父容器宽度(单位rpx)÷2的值为偶数或偶数.5的时候会出现该bug。

于是，我怀着将信将疑的态度看了一下，哎哟呵，果然我的width为44rpx/2为偶数，结果按着这老哥的方案一试，结果真解决了，贴出老哥的方案：

1）第一种方式是设置标签父容器的宽度到无bug值，即(奇数或奇数.5)*2,例如281*2rpx,281.5*2rpx可以解决;

2）第二种方式是补充像素单位：

就是加一个1rpx的标签，例如：

.space {

    width: 1rpx;

    height: 100%;

    float: left;

 }

我自己又瞎折腾了一下，发现加1rpx的margin也行，至此，问题终于圆满解决✿✿ヽ(°▽°)ノ✿，感谢tiankf老哥。

至于为什么会这样，那就需要研究渲染原理，这个。。。容后再做(￣▽￣)／