码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2019-09-24 17:10:45      阅读:435      评论:0      收藏:0      [点我收藏+]

标签:绝对定位   问题   默认   alc   env   content   就是   set   微信   

大致文字初略的记录描述一下问题:外层是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,该机制有点难理解。。。
 
仅以此记录小程序中一个诡异的小问题,写的粗略,没有截图代码啥的。

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

标签:绝对定位   问题   默认   alc   env   content   就是   set   微信   

原文地址:https://www.cnblogs.com/hjj2ldq/p/11579260.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!