display: flex与position:absolute，IOS个别机型样式不兼容

最新推荐文章于 2022-04-22 15:04:00 发布
最新推荐文章于 2022-04-22 15:04:00 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： 备忘 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42705322/article/details/96320180
版权

在小程序页面中父元素使用display:flex时，子元素使用position:absolute后。在苹果6s/6P/6sP的系统下会出现兼容问题，子元素position:absolute不生效页面出现布局混乱。所以当子元素要用position:absolute，父元素不能使用 display: flex布局。否则会出现兼容问题（开发工具测不出问题，真机会在6s/6P/6sP才能测出问题）

陌_雪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
famous-test-positionabsolute:在移动设备（iOS 和 android）上显示键盘时测试绝对定位问题
07-11
著名测试位置绝对 在移动设备（iOS 和 android）上显示键盘时测试绝对定位问题 ### 问题 当虚拟键盘显示在 iOS 和 Android 上，并且屏幕底部下方有隐藏的表面时（例如，当使用 Scrollview 时），窗口 scrolloffset 会错位。 解析度 要解决此问题，需要将以下行添加到 body 标记中： body { position : absolute; } 接触 @IjzerenHein :copyright: 2014 - 海因鲁杰斯
display: flex弹性布局
10-12
display: flex弹性布局
详解flex布局与position:absolute/fixed的冲突问题
01-19
之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下： 项目实战： 我们现在想做一个头部的导航栏，又想用fixed把它固定在上方，又想用弹性盒布局去设置它内部的样式，可是发现其中的弹性盒布局已经失效了。 HTML代码如下： 协会简介 协会章程 协会架构 资料下载 CSS代码如下： ul { position: fixed; display: flex;
ios系统关于position:absolute出现的bug
qq_37514029的博客
12-18 5336
上两张图说明一下遇到的bug 选择单位名称的时候底部弹出选择框,把页面弹上去了,选择完成后页面没有回来。input框弹出键盘后收起键盘也是一样的问题。 我的6sp没有出现这个问题，同事的6s出现了,其他型号手机未测试。 经排查，是键盘弹出时Window窗口滚上去了，收起键盘时窗口没有恢复正常。 解决办法： // 当body元素或其任意子元素失去焦点时，设置 wind...
flex与position用在一起出现的问题
huangwensu的博客
10-10 4748
需求：导航栏固定在头部，并且可以左右滑动 <div class="wrap"></div> //css样式 .wrap { position: fixed; display: flex; } 发现flex布局失效了，因此被定位的盒子不参与flex布局。 那就在这个盒子外面套一个盒子，给外层盒子使用定位，内层没有使用定位的盒子继续使用flex <div class="content"> <div class="wrap">&
解决【display：flex布局】遇上 【position: absolute / fixed 】的失效问题
柠檬不萌只是酸i
08-11 2万+
问题描述： 有个这样的页面，页面是通过flex布局的，现在想将头部( 我的订单栏 )固定，那么我们第一反应就是添加定位呀，position : fixed。但是问题来了，position可以添加，但是添加之后，页面变成这样了（如下所示）， 也就是设置的display:flex 失效了，不起作用。 position 一般常用的属性值有三种： relative 、 absolut...
安卓与IOS样式不兼容，position:absolute
吴纯玲的博客
08-27 1万+
样式用到position:absoulte 在微信开发者工具和安卓真机测试，样式正常，然而ios系统真机测试显示不正常。 经查，因为父元素display:flex布局的原因，导致安卓与ios不兼容，换掉该布局方式，其子元素继续使用position:absoulte则样式正常 ---- 2019/03/18更新 再次实践证明，当父元素为display:flex，子元素为position...
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
display:table-cell实现兼容性的两栏自适应布局实现代码
09-25
display:table-cell实现兼容性的两栏自适应布局,需要的朋友可以参考下
ReactNative之Android绝对布局position:'absolute'问题
wayne214的博客
12-09 2004
工作中会遇到各种各样的问题，ReactNative开发也是填坑不止。 比如最近在开发需求中，就遇到一个问题。在一个卡片类型的右上角添加一个删除按钮。使用了绝对布局position:'absolute’属性，在Android上却无法正常显示，很是烦恼。 有一个相关的issue:https://github.com/facebook/react-native/issues/27255 正常希望的展示效...
小程序iphonex全面屏/非全面屏 fixed 固定底部兼容问题
qq_40509733的博客
08-24 798
position:fixed; left:0; //不完全固定底部 bottom:calc(20rpx（距底部高度） +constant(safe-area-inset-bottom)); bottom:calc(20rpx（距底部高度）+env(safe-area-inset-bottom)); //完全固定底部 //bottom:constant(safe-area-inset-bottom); //bottom:env...
当display:flex弹性布局与position:absolute/fixed定位一起用，会出现的问题与解决方法
qq_27717857的博客
02-28 9775
首先放出使用场景的截图： 使用场景 导航栏固定定位 导航栏内，平均分为四块，为了适配各种移动设备，使用了flex布局。 与此同时，产品经理要求：页面上滚越过封面图时，导航栏变为固定定位，浮在页面顶部。 拿到需求之后，思路就是先搞好布局，然后监听window.onscroll，当页面滚的距离大于封面图的时候，给ul加入position：fixed。 下面再现一下问题： &l...
使用flex布局后文字位置发生偏移如何解决
qq_43504355的博客
05-01 4360
使用flex布局后文字位置发生偏移如何解决 在页面排版过程中有时候会用到flex进行页面的布局设置,将文字对齐到一行中,但是使用后发现会发生文字的偏移 页面代码 <div class="title_head"> <div class="title_context"> <h2>管理后台</h2> <a&g...
关于css中的position:absolute定位不起作用或者溢出父元素隐藏不了的问题
glgom的博客
11-05 3万+
position:absolute定位不起作用？溢出父元素隐藏不了？的问题 总的原因还是对定位的理解错误。 position:absolute是相对父元素进行绝对定位的，且该父元素必须定义有position的值(relative、absolute、fixed)，若父元素没有定义有position，则是相对于body进行定位。 position总的来说分为绝对定位和相对定位。    值 ...
小技巧css解决移动端ios不兼容position:fixed属性，无需插件
热门推荐
小白努力走
10-15 15万+
ios运用position:fixed会错位，css一行样式巧妙解决定位问题。
CSS中flex对部分IOS版本兼容性问题
AI_huihui的博客
04-22 7124
众所周知，ios系统老是和我们前端过不去，搞一堆不兼容问题，比如flex布局！
display:flex和position:fixed
最新发布
07-28
回答: 当使用display:flex和position:fixed一起使用时，会出现问题。\[1\]在这种情况下，设置了position:fixed后，display:flex的布局效果会失效。\[2\]这是因为position:fixed会使元素脱离文档流，不再参与flex布局。\[3\]解决这个问题的方法是给使用display:flex的盒子外面嵌套一个盒子，并给外层盒子添加position:absolute/fixed，并设置width:100%。这样可以保持flex布局的效果，并实现固定定位。 #### 引用[.reference_title] - *1* *2* [解决【display：flex布局】遇上 【position: absolute / fixed 】的失效问题](https://blog.csdn.net/Miss_liangrm/article/details/99184017)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [当position: fixed； 遇到 display: flex；](https://blog.csdn.net/brokenmile/article/details/113445229)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值