今天一如往常，在閑暇之余逛著國內(nèi)最大的百貨商場。

逛到一半后，再次帶著想占商家便宜的心理，打開了它的月卡紅包頁。

就是這個看起來極其工整對稱的網(wǎng)格布局，卻也暗藏了一個極其不明顯的顯示bug。

或許像我一樣無聊眼睛像我一樣尖的讀者已經(jīng)注意到了。

我把它放大來看一下。

沒錯，這兩行文字。

沒有對齊！

而這兩行文字的親哥元素，也就是上面兩張圖片，他們的底部卻是很齊的。

由此很容易推斷出，使得下方標(biāo)題元素對不齊的罪魁禍?zhǔn)?，就是它?/p>

正是由于這個不起眼的聚劃算icon的存在，使得下方所有元素的位置都被擠下去了一點。

分析猜測一下bug成因。

首先仔細(xì)觀察一下細(xì)節(jié)部分。

（兩組商品之間，商品圖片底部和標(biāo)題之間的距離幾乎相同，或者說差距太小難以分辨，這里我選擇暫且忽略）

能夠簡單推斷出

“由于icon高度超過標(biāo)題文字高度，導(dǎo)致包裹整個icon和文字元素的塊元素的總高度，超過了僅包含文字元素的塊元素的高度?！?/p>

也就是說，看起來，只要把icon的高度調(diào)整至與文字高度一致即可

……

嗎？

問題好像不止這一點。

仔細(xì)看就可以發(fā)現(xiàn)：

icon與文字的高度差過于細(xì)微了，并不足以支撐下方價格之間的高度差。

而最先體現(xiàn)出這個高度差的元素是什么呢？就是這個付款人數(shù)元素。

那么這約9個像素的高度差的來源是什么呢？根據(jù)我的猜測，很有可能來自于icon的下邊距+之前的icon與文字元素的高度差。

也就是說，如果我的分析猜測沒有問題的話，這兩點就是導(dǎo)致這次頁面顯示bug的全部原因了。

當(dāng)然，為了防止偶然性，我還截了另幾組商品的圖，大家對比一下就知道了。

實際上我在ipad上也發(fā)現(xiàn)了相似的問題，但是仔細(xì)看看的話，好像又和安卓端不完全相同，但是似乎還是和上下外邊距相關(guān)。這里就不去推測了。

（還是忍不住偷偷猜測一波，二者很可能是同一組代碼但是在不同系統(tǒng)環(huán)境下顯示效果存在差異）

以上差不多就是本文的全部正文內(nèi)容了。

歡迎看到這里的讀者們，有錢的捧個錢場（投幣），沒錢的捧個人場（點贊）。多謝各位了。

最后附上我的說明：

作者尚未工作，由于技術(shù)和經(jīng)驗的不足，不保證內(nèi)容的正確性，所以全文我都在強調(diào)“猜測”。

對于文章中的錯誤，歡迎大佬們指正。

（本文提到的所有“像素”均為截圖后的“像素”，僅為反應(yīng)距離，與應(yīng)用實際的“像素”無關(guān)。）

（測試設(shè)備：小米MIX3，ipad air3，應(yīng)用版本：安卓版，9.8.0，ios版，9.8.0）