问题:

IOS8.2 dispaly:flex;不生效;

注意一下兼容写法的顺序问题,


 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-flex; /* Firefox 18+ */

 display: -ms-flexbox; /* IE 10 */

 display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

dispaly: -webkit-box与 display: flex一类flex属性值是不同版本的flexbox,

前者是09版本,后者是12版本,如果将-webkit-box写在webkit-flex后面 浏

览器就会调用就版本的flexbox规范

IOS8 对flex兼容性问题的更多相关文章

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

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

  2. css flex兼容性

    我测试了一下css flex的兼容性 已经可以兼容到IE10了呀 为啥MDN上面的IE兼容性还是兼容到IE11 有点更新不及时的感觉

  3. flex 兼容性写法

    flex http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰老师详解 box 用于父元素的样式: display: box; 该属 ...

  4. flex兼容性问题

    flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器) 如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南] 纯手写css兼容代码,需给每个使用的属性 ...

  5. flex兼容性之Webpack3+postcss+sass+css

    1:⚠️⚠️ 首先安装依赖 npm install --save-dev webpack style-loader css-loader postcss-loader sass-loader auto ...

  6. 页面常见布局以及实现方法--flex

    页面布局是前端工程师的基本功之一,总结分析各种布局实现方法,可以让自己快速定位哪种方法实现功能,同时可以做到现最大程度的兼容. 一.水平居中 假设:最基本机构 .parent>.child 1. ...

  7. 用Flex实现常见的几种布局

    用Flex实现常见的几种布局 1.水平,垂直居中. <style type="text/css"> .container{ display: flex; width: ...

  8. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  9. 几种常见布局的flex写法

    flex布局目前基本上兼容主流的浏览器,且实现方式简单.我整理了flex的一些知识点,并且总结归纳了几种常见布局的flex写法 ​flex基础知识点 flex-grow和flex-shrink相关计算 ...

随机推荐

  1. Hashmap,Set,Map,List,ArrayList的区别

    表格: 类型 默认容量 加载因子[1] 扩容增量 底层实现 是否安全及同步方式 Vector 10 1 2倍 Object数组 安全,synchronized ArrayList 10 1 1.5倍( ...

  2. IDEA环境配置里的一些error

    1. idea添加edit configuration 没有tomcat图标 File->Setting->Build,Execution,Deployment-->Applicat ...

  3. 函数的arguments对象的使用和介绍

    arguments对象用于函数,当不知道传递了多少个实参,就可以使用arguments对象进行存储传递过来的实参(这时不需要写形参). arguments是一个内置对象,也是一个伪数组,我们可以按照数 ...

  4. 极简 Node.js 入门 - 4.3 可读流

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  5. Burp Suite的安装

    安装均在虚拟机环境下进行. 1.首先在浏览器找到java进行最新版本的安装. 2.然后找到burp suite 的安装包下载 不知道这一次 怎么直接跳过安装打开了.

  6. 学习Maven有感

    1.maven的由来 maven是一款服务于java平台的自动化构建工具 构建定义:把动态的Web工程经过编译得到的编译结果部署到服务器上的整个过程. 编译:java源文件[.java]->编译 ...

  7. MyBatis多对一,一对多,多对多,一对多关联查询

    一.Person实体类 1 public class Person { 2 private Integer personId; 3 private String name; 4 private Int ...

  8. Python练习题 011:成绩打分

    [Python练习题 011] 利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示. ---------------------- ...

  9. C 多态 RT-Thread

    // RT-Thread对象模型采用结构封装中使用指针的形式达到面向对象中多态的效果,例如: // 抽象父类 #include <stdio.h> #include <assert. ...

  10. Flutter 开发从 0 到 1(三)布局与 ListView

    上周日出去玩了,因此没时间写文章.我司加班到 11 点,第二天可以晚上班一个小时,加班到 12 点,可以晚上班两个小时,以此类推,为什么说这个,对的,加班第二天我没有多睡觉,而是起来抓紧时间写文章,好 ...