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


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM