微信小程序的calc不生效处理

Posted 2022-11-29 hjj2ldq

大致文字初略的记录描述一下问题：外层是relative相对定位，内部一个view 需要绝对定位bottom的值为128rpx,同时还要兼容适配苹果x的底部，所以值是这样设置的：

bottom: calc(env(safe-area-inset-bottom) + 128rpx)

 

然而在安卓上bottom的值始终为0（在vconsole中查看了该元素），ios上是没有问题的。猜测：calc在安卓中不生效。

 

解决办法：样式写成这样：bottom:128rpx ;bottom: calc(env(safe-area-inset-bottom) + 128rpx) （注意前后顺序，不能更换）

 

分析： 第二个bottom中带有calc 在ios中会生效，所以会直接覆盖前面bottom。 然而在安卓中第二个bottom的值由于不能识别calc导致该值是不合法的，此时值无效，直接就是第一个bottom生效。

 

查了css中 bottom 不设置默认就是auto，父级元素有padding的话，会在content元素边界上，如果bottom值为0：就会在父级元素的padding边界上！但是在小程序中第二个bottom无效，直接采用了第一个bottom，该机制有点难理解。。。

 

仅以此记录小程序中一个诡异的小问题，写的粗略，没有截图代码啥的。