今天在做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.youkuaiyun.com/c5211314963/article/details/80323443

本文详细探讨了在uni-app项目中,使用1upx边框时遇到的显示不全问题,特别是在iPhoneXSMax上的表现。通过实践,发现了将父元素高度设为奇数或奇数.5的解决方案,有效解决了上下边框的显示问题。同时,文章还提供了适用于左右边框无效情况的调整宽度策略。
2133

被折叠的 条评论
为什么被折叠?



