比淘宝更无聊的我，发现了它的一处页面bug（maybe
今天一如往常，在闲暇之余逛着国内最大的百货商场。
逛到一半后，再次带着想占商家便宜的心理，打开了它的月卡红包页。
就是这个看起来极其工整对称的网格布局，却也暗藏了一个极其不明显的显示bug。
或许像我一样无聊眼睛像我一样尖的读者已经注意到了。
我把它放大来看一下。
没错，这两行文字。
没有对齐！
而这两行文字的亲哥元素，也就是上面两张图片，他们的底部却是很齐的。
由此很容易推断出，使得下方标题元素对不齐的罪魁祸首，就是它。
正是由于这个不起眼的聚划算icon的存在，使得下方所有元素的位置都被挤下去了一点。
分析猜测一下bug成因。
首先仔细观察一下细节部分。
（两组商品之间，商品图片底部和标题之间的距离几乎相同，或者说差距太小难以分辨，这里我选择暂且忽略）
能够简单推断出
“由于icon高度超过标题文字高度，导致包裹整个icon和文字元素的块元素的总高度，超过了仅包含文字元素的块元素的高度。”
也就是说，看起来，只要把icon的高度调整至与文字高度一致即可
……
吗？
问题好像不止这一点。
仔细看就可以发现：
icon与文字的高度差过于细微了，并不足以支撑下方价格之间的高度差。
而最先体现出这个高度差的元素是什么呢？就是这个付款人数元素。
那么这约9个像素的高度差的来源是什么呢？根据我的猜测，很有可能来自于icon的下边距+之前的icon与文字元素的高度差。
也就是说，如果我的分析猜测没有问题的话，这两点就是导致这次页面显示bug的全部原因了。
当然，为了防止偶然性，我还截了另几组商品的图，大家对比一下就知道了。
实际上我在ipad上也发现了相似的问题，但是仔细看看的话，好像又和安卓端不完全相同，但是似乎还是和上下外边距相关。这里就不去推测了。
（还是忍不住偷偷猜测一波，二者很可能是同一组代码但是在不同系统环境下显示效果存在差异）
以上差不多就是本文的全部正文内容了。
欢迎看到这里的读者们，有钱的捧个钱场（投币），没钱的捧个人场（点赞）。多谢各位了。
最后附上我的说明：
作者尚未工作，由于技术和经验的不足，不保证内容的正确性，所以全文我都在强调“猜测”。
对于文章中的错误，欢迎大佬们指正。
（本文提到的所有“像素”均为截图后的“像素”，仅为反应距离，与应用实际的“像素”无关。）
（测试设备：小米MIX3，ipad air3，应用版本：安卓版，9.8.0，ios版，9.8.0）
