flex布局在ios8上的兼容性问题

最新推荐文章于 2022-07-11 15:17:17 发布

李留白

最新推荐文章于 2022-07-11 15:17:17 发布

阅读量1.7w

点赞数

CC 4.0 BY-SA版权

分类专栏：易忽略点文章标签： webkit flex 布局 ios

本文链接：https://blog.youkuaiyun.com/hicoldcat/article/details/78134893

易忽略点专栏收录该内容

8 篇文章

订阅专栏

本文描述了在iOS8设备上的Safari浏览器中遇到的Flex布局兼容性问题及解决方案。作者通过添加WebKit前缀解决了该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做项目时，使用到了flex布局。其他ios版本都还好，唯独在ios8上遇到了flex布局没起作用的问题。后来经过研究才发现，safari使用的是webkit内核，在ios8上需要单独加一下兼容才起作用。

display: flex;
display: -webkit-flex; 
justify-content: center;
-webkit-justify-content: center;
align-items:center;
-webkit-align-items: center;
...

坑到跳时方觉深啊！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

李留白

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

flex 兼容性_flex兼容ios（iphone6）

weixin_35698659的博客

01-19

987

开发过程使用flex简直不要太6，但是如果只是写新版本的语法形式，是肯定存在兼容性问题的（安卓机基本没啥问题，主要是ios）一、问题flex布局分为旧版本dispaly: box；过渡版本dispaly: flex box；以及现在的标准版本display: flex；Android2.3 开始就支持旧版本display:-webkit-box;4.4 开始支持标准版本display: flex;...

浅谈Html5移动端ios/Android兼容性总结

12-14

HTML5在移动端，尤其是iOS和Android平台上的兼容性问题是一个重要的议题，因为它直接影响到用户体验和应用的稳定性。本文将深入探讨这些兼容性问题，并提供一些解决方案。首先，我们需要理解`viewport`元标签的...

参与评论您还未登录，请先登录后发表或查看评论

css flex布局iOS8兼容性问题

lzc的博客

07-25

8589

cssflex布局iOS8兼容性问题，大多数情况下都能够通过兼容性写法解决，比如： div { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; flex-direction: row; -webkit-flex-direction: row; } 如果以上兼容性写法还不能解决问题，那就要...

IOS与安卓样式兼容问题

cc1314_工作、学习有感

07-02

2490

1.margin在IOS中失效在页面中元素使用margin值，在某些IOS设备下会出现失效的情况，而安卓机则正常显示，此问题暂无直接的解决方案，当前使用空DIV控制间距。 2.fixed定位问题整个页面的fixed定位，在ios下下拉会触发下拉事件，但是没有动画效果。Android就能正常运行 flex中使用绝对定位，ios出现严重错位，导致父级元素也会变成绝对定位，Android能达到理想...

CSS中flex对部分IOS版本兼容性问题

AI_huihui的博客

04-22

8580

众所周知，ios系统老是和我们前端过不去，搞一堆不兼容问题，比如flex布局！

display：flex不兼容Android、Safari低版本的解决方案【flex布局】

itKingOne的博客

01-22

6622

DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>flexbox布局title> style> div { border: 1px solid #000; overflow: hidden; } div.flex-h:before, div.

小程序布局混乱原因探索：Flex布局与iOS8.x的兼容性问题

此外，对于flex布局在iOS 8.x的兼容性问题，开发者了解到通常需要添加相应的WebKit前缀来保证其在旧版浏览器中的正常工作，例如 `-webkit-box`、`-webkit-flex`、`-ms-flexbox` 和 `display:flex`。这个问题提醒...

flex布局实现上下固定中间滑动的布局方式

11-20

如果需要在iOS设备上实现平滑滚动，可以添加`-webkit-overflow-scrolling: touch`，但可能存在一些兼容性问题。在提供的代码示例中，使用了Vue.js框架，并引入了第三方库Better Scroll来处理中间内容的滚动。`...

微信小程序开发之IOS和Android兼容的问题

08-29

微信小程序开发在不同移动设备平台如IOS和Android上运行时，开发者常常会遇到一些兼容性问题。针对IOS和Android平台的兼容性问题，主要可以从以下几个方面进行理解和解决。一、时间转换问题：时间格式化是大多数...

微信小程序开发：解决iOS与Android兼容性挑战

最新发布

07-08

在微信小程序开发中，开发者常常会遇到 IOS 和 Android 平台的兼容性问题，以下是主要的几个方面及解决方法：时间格式化是常见开发场景，但 IOS 系统处理时间格式化时需格外注意。比如用 new Date() 函数将特定字符...

flex安卓手机、苹果手机兼容问题

qq_21138747的博客

12-14

930

justify-content: space-evenly; */ //安卓手机上面的代码无效，苹果手机没问题 //换成下面的代码就行 justify-content: space-around;

iPhone 7/8plus 样式兼容性问题

weixin_42560424的博客

07-11

696

苹果兼容性问题，图片兼容性，样式兼容性，弹性盒子

flex 布局问题

loshirleyve的博客

09-17

476

http://blog.youkuaiyun.com/oudoni/article/details/64442741 用weui做微网站陷入了flex布局的坑。 flex与text-overflow配合效果一直都不是很理想。查阅了不少资料都无法解决问题（基本上能搜到的资料都是2层结构的，即flex容器与flex项两层，而自己的项目里面是有多层结构的，所以一直搭配不良）。最后，多次尝试后终于解决问题。即除了t

IOS8以下版本flex布局兼容问题

小破孩的博客

07-10

4671

有次和同事一起写了一个项目，一开始没想到这个flex布局的兼容问题，主要是之前也没遇到过。结果在测试的时候发现ios8以下版本居然不支持flex布局，包括justify-content这类属性，都不支持，最后只能用兼容性的写法，问题就解决了。display: flex;display: -webkit-flex;justify-content: space-between;-webkit-just...

ios9 以下 flex 兼容问题

FE-阿阳的博客

02-06

7707

ios9 以下 flex 兼容问题详情描述 ios9 以下，display:flex 元素的第一级子元素必须是block，否则 flex 布局是不会生效的

display：flex浏览器兼容

leo8729的专栏

09-27

9312

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-fl

display:flex和display:box布局浏览器兼容性分析

weixin_30361641的博客

10-25

641

display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。 1.关于display:flex 对于响应式布局，使用flex很方便，但是...