当前位置: 首页 > Web前端 > CSS

微信小程序开发时绝对定位偏移和宽高问题

时间:2023-03-31 12:13:07 CSS

微信小程序使用微信小程序开发微信小程序时使用绝对居中问题使用before和after伪类作为加号(+)水平和垂直,发现无论水平和垂直如何调整,它们都偏离了原来的居中位置。.add-btn{width:40rpx;height:40rpx;background:linear-gradient(90deg,#E843690%,#DF2757100%);border-radius:999rpx;position:relative;text-align:center;color:#fff;}.add-btn::before{display:block;content:'';background:#fff;height:26rpx;width:4rpx;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0);}.add-btn::after{display:block;content:'';background:#fff;height:4rpx;width:26rpx;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0);}####result:伪元素的宽高和位置有偏差。我尝试了很多方法(手动调整top、left、translateX、translateY等)都没有效果。最后发现是padding的问题(虽然上面的代码没有设置padding)。当level和sub-level元素的padding都转换为margin或者width/height时,显示就正常了。####结果:说明正常猜测可能是微信小程序的width/height/margin/top对rpx的适配比例与padding对rpx的适配比例不同,导致微信小程序适应padding,使相关元素的位置和宽高有偏差。