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

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