安卓与IOS样式不兼容，position:absolute

最新推荐文章于 2024-06-26 16:59:10 发布
最新推荐文章于 2024-06-26 16:59:10 发布
阅读量1w 收藏 11
点赞数 4
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30604453/article/details/82116427
版权

样式用到position:absoulte  在微信开发者工具和安卓真机测试，样式正常，然而ios系统真机测试显示不正常。

经查，因为父元素display:flex布局的原因，导致安卓与ios不兼容，换掉该布局方式，其子元素继续使用position:absoulte则样式正常

 

---- 2019/03/18更新

再次实践证明，当父元素为display:flex，子元素为position:absolute时。在苹果6s/6P（ios10）的系统下会出现兼容问题，子元素无法居中。所以当子元素要用position:absolute，父元素不能是flex布局。否则会出现兼容问题（chrome开发工具测不出问题，真机才能测出问题）

墨霁青玉
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
h5开发网站-css实现页面的背景固定定位；以及安卓ios手机端兼容问题
weixin_48596030的博客
09-05 1150
在页面滚动时，背景图片保持不变，而不是跟随滚动。
微信小程序从入坑到放弃二十二：完美兼容安卓和ios手机的底部评论框
yilingsj的博客
06-20 1277
摘要： 不管是在普通的H5页面还是在微信小程序中，底部输入框一直是一大难题，因为键盘会在某些情况下遮挡信输入框一部分！值得庆幸的是：在微信小程序中，我们可以通过监听bindfocus来获取键盘的高度，动态算出输入框距离屏幕顶部的距离…
关于iphone 6 10.3.3版本下设置绝对定位absolute后的定位偏差问题
weixin_43776965的博客
08-19 828
在用absolute写购物车的右上角数字样式的时候，发现在iphone 6 10.3.3版本下定位的位置和正常孩子(phone)不太一样，经过测试发现，在只设置absolute不设置位移的情况下，正常来说应该是保持原有位置的，但是在iphone 6 下，位置实际上是跑到了控件最上方，ps:就不给图了。 后来在咨询大佬后，有了解决方案，给父控件设置relative，然后给数字样式设置right:0,top:0.这样它们的起点就是一样的了，后面再慢慢调就好了。 为什么给父控件设置relative，然后给数字样式
关于position: sticky在小程序中IOS真机下，偶然失效的问题总结
厦门在乎科技
08-31 2666
虽然小程序中有大把的自定义sticky组件可用，原理无非是监听页面滚动改变position来实现，实际体验上卡顿感难以避免，跟原生的position: sticky比还是有很大距离。 最近写的页面已经开始逐渐用上原生position: sticky，在测试中发现IOS真机下，某些场景的sticky会失效，花了点时间研究，得出来以下结论： IOS必须加上position: -webkit-sticky; IOS下sticky的元素必须与占位元素在同一个作用域下面，才生效 直接在页面中写sticky有效
使用 position:absolute； 定位的元素在ios上被遮盖
最新发布
小白白的博客
06-26 301
在ios上一个元素使用position:absolute;定位后，被其它元素遮盖。在使用absolute的元素上加一行代码。
ios兼容性问题---position:absolute;属性
youngeffort的博客
11-16 5373
替代方案：移动端普遍是锁定视口的，可用position:fixed;替代    
ReactNative之Android绝对布局position:'absolute'问题
wayne214的博客
12-09 2048
工作中会遇到各种各样的问题，ReactNative开发也是填坑不止。 比如最近在开发需求中，就遇到一个问题。在一个卡片类型的右上角添加一个删除按钮。使用了绝对布局position:'absolute’属性，在Android上却无法正常显示，很是烦恼。 有一个相关的issue:https://github.com/facebook/react-native/issues/27255 正常希望的展示效...
关于移动端安卓和ios样式不统一
weixin_44969235的博客
07-17 670
移动端安卓和ios 样式兼容
微信小程序样式position理解
qq_34327821的博客
01-17 922
一.定位：position属性允许你对元素进行定位。 二.定位机制：有三种：普通流，浮动流，绝对定位。 三.定位属性值：static，relative，absolute，fixed，inherit，-ms-page，initial，unset（后面3个属性是小程序中有的，没看懂是什么样子） 1.static：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或者...
吸顶处理兼容iOS和Android
Prince_fmx的博客
06-17 1727
touch页面吸顶设置问题抛出解决思路sticky 定位解决办法判断设备类型安卓的吸顶处理iOS的吸顶处理代码整合 问题抛出 当页面上滑时，顶部当导航需要进行吸顶处理。滑动过程使用scroll事件监听，当滚动的高度到底一定时，便设置样式 absolute:fixed；top:0px;以吸顶处理。 以上处理在安卓中时完全没有问题的，但是在iOS中缺会出现严重的样式问题：页面滚动过程中并不吸顶。 解决...
微信position: fixed的坑及解决之道
凝视深渊
10-18 1万+
文章目录问题描述解决之道思路和踩的坑思路：踩坑（不完美/无效的解决方案）： 问题描述 安卓手机上，微信环境下上传完图片后，position: fixed 的导航栏在上下滚动页面的时候出现了抖动的情况，抖动完回到原位。 ios上没测，但搜索问题的过程中发现有人反应IOS微信环境下position:fixed也有抖动的问题。 解决之道 页面结构是： <div id="#app"></...
微信小程序中的position问题，自定义函数学习使用
03-29
作者：WickedDogg，来自原文地址  如果同时将一个position不为static的容器内的多个块position设置为absolute，开发者工具和安卓端会正常表现，即从容器左上角开始算起，依据设置的top，right，bottom，left来定位，像下面这样 (此图片来源于网络，如有侵权，请联系删除! ) 而在测试iOS时候，表现有所差异，如果只设置某一边，比如说我设置了蓝块的top=0，黄块的bottom，那么我们期待的应该是这样表现 (此图片来源于网络，如有侵权，请联系删除! ) 但实际上在ios上测试的时候出现了这样的情况 (此图片来源于网络，如有侵权，请联系删除! ) 在i
html5 IOS下拉框样式
03-09
在iOS设备上，HTML5的`<select>`元素默认的样式与Android或桌面浏览器存在显著差异，这常常会给开发者带来挑战。iOS中的下拉框（选择器）具有半透明背景和较窄的边框，其视觉效果可能不符合设计师对整体界面风格的...
【微信小程序开发】IOS与安卓样式兼容问题
热门推荐
罗忠浩的博客
10-09 1万+
1.margin在IOS中失效 在页面中元素使用margin值，在某些IOS设备下会出现失效的情况，而安卓机则正常显示，此问题暂无直接的解决方案，当前使用空DIV控制间距。 2.fixed定位问题 整个页面的fixed定位，在ios下下拉会触发下拉事件，但是没有动画效果。Android就能正常运行 flex中使用 绝对定位，ios出现严重错位，导致父级元素也会变成绝对定位，Android能达
display: flex与position:absolute，IOS个别机型样式不兼容
weixin_42602504的博客
08-21 1219
在小程序页面中父元素使用display:flex时，子元素使用position:absolute后。在苹果6s/6P/6sP的系统下会出现兼容问题，子元素position:absolute不生效页面出现布局混乱。所以当子元素要用position:absolute，父元素不能使用 display: flex布局。否则会出现兼容问题（开发工具测不出问题，真机会在6s/6P/6sP才能测出问题） ...
ios与安卓样式兼容问题
水势年华的博客
04-22 1677
1.margin在IOS中失效 　　在页面中元素使用margin值，在某些IOS设备下会出现失效的情况，而安卓机则正常显示，此问题暂无直接的解决方案，当前使用空DIV控制间距。 2.fixed定位问题 　　整个页面的fixed定位，在ios下下拉会触发下拉事件，但是没有动画效果。Android就能正常运行 　flex中使用 绝对定位，ios出现严重错位，导致父级元素也会变成绝对定位，And...
css在ios和android设备上的兼容性问题（移动设备不同内核浏览器样式兼容性）笔记
CM logs
10-12 1万+
position属性带来的浮动问题： 项目案例： 网宿流量微信公众号活动红包抽奖页面； 问题描述： 在input被获取焦点时，屏幕上position属性值为absolute的元素，包含input，会被弹出的虚拟键盘顶起，导致显示样式异常 设备： android设备存在此问题，而ios设备显示正常 原因分析： css属性中对容器的样式中提到，子元素定位方式为absolute或者fix
安卓和ios手机端样式冲突
a545132569的博客
04-01 680
今天做项目突然发现项目中的手机端样式在案桌上好着，但是在苹果上面字体就特别小； 最后发现是因为一个头元素引起的 <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-tou...
解决ios与安卓兼容问题 --- css
long321041080的博客
01-04 2219
1：ios端input、button样式不生效 .input{ -webkit-appearance: none;/*解决ios样式问题*/ } 2：ios端禁用屏幕缩放 <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sca
小程序在iOS图标position: absolute;不显示
05-26
iOS 对小程序图标的显示有一些限制，其中包括不支持 position: absolute 样式。因此，即使你在小程序中设置了 position: absolute 样式，iOS 也不会显示它。 如果你想要让小程序图标在 iOS 上显示，可以尝试以下方法： 1. 将 position: absolute 样式移除，使用其他方式布局。 2. 使用一个占位符元素来代替小程序图标，然后在占位符元素上应用 position: absolute 样式。 3. 将小程序图标嵌入到一个容器元素中，然后在容器元素上应用 position: absolute 样式。 希望这些方法可以帮助你解决问题！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值