1upx border在某些手機機型上某一邊框顯示不出來解決方案

今天在做uni-app項目進行測試時,發現當邊框爲1upx時,某些框的邊顯示不全(無效)。自己某前遇到問題的手機:iPhone XS Max。展示的bug效果如下:

 

 

以上區域中,發現邊框的下邊沒有顯示出來。又是兼容問題導致的bug。於是網上去查找了一些資料,大致歸類爲以下幾種。

1、將邊框樣式寫在“行內樣式”中,即以style的形式嵌在標籤中。親測無效,對於我的項目。大家可以針對自身項目自測下。

2、修改父容器的寬度爲奇數或奇數.5

自己用這種方式也無效,最後通過如下設置解決 :將父元素的高設置爲奇數或奇數.5。(學會了借鑑,哈哈)

 

說明:

1>自己項目中爲上或下邊1upx border無效的情況。如果是左或右1upx border無效的話,可以將父元素的寬設置爲奇數或奇數.5。

2>其他單位(如1px、1upx等)的border 出現此類情況,也可以用該手段。

3>至於爲什麼會造成這種兼容bug,至今不知是如何導致的。

具體分析過程請參考(此文章是左或右)無效的請求:https://blog.csdn.net/c5211314963/article/details/80323443

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章