大致文字初略的記錄描述一下問題:外層是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,該機制有點難理解。。。
僅以此記錄小程序中一個詭異的小問題,寫的粗略,沒有截圖代碼啥的。