今天突然发现flex布局不支持safari  解决办法

.page-wrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-content {
width: %;
}
.main-nav,
.main-sidebar {
-webkit-box-flex: ; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: ; /* OLD - Firefox 19- */
width: %; /* For old syntax, otherwise collapses. */
-webkit-flex: ; /* Chrome */
-ms-flex: ; /* IE 10 */
flex: ; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

感谢http://www.w3cplus.com/css3/using-flexbox.html

苹果safari支持flex布局的更多相关文章

  1. 让iphone5s 支持 flex 布局

    /* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;di ...

  2. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  3. flex布局笔记整理

    flex布局笔记整理 了解-webkit-box 利用postcss进行css代码的向后兼容时,display:flex兼容后的代码常会带有display:-webkit-box. 部分移动端内核较低 ...

  4. IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1

    由于最近项目要嵌入其它平台,所以要做IE11 的兼容,那就用IE11打开网页看一看,一看吓一跳,页脚直接到了页眉的下面,并把主要内容覆盖了,也就是stick footer 布局失效了,我写了一个简易的 ...

  5. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  6. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  7. Flex 布局

    Flex 布局     网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非 ...

  8. Flex 布局教程:语法篇[转]

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. Flex布局总结

    2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能.lex布局将成为未来布局 ...

随机推荐

  1. 解决vs 编译的bug“请检查是否是磁盘空间不足、路径无效或权限不够”

    昨晚用vs编译遇到一个问题,编译一半发现硬盘没空间,一直重启vs,重启电脑, 删除pdb文件都没用,之后尝试重新生成解决方案,就解决了.这个是vs的一个bug

  2. [bzoj]1003: [ZJOI2006]物流运输

    Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...

  3. Spring框架配置文件中有两个相同名字的bean,最后会覆盖掉一个bean

    问题容易出现在多个人合作的项目中,定义bean的名字的时候发生重复. 可以配置当bean定义重复的时候抛出异常,结束程序,强制提示更改重复的bean.

  4. redis cluster 配置

    #服务器192.168.56.111 192.168.56.112 192.168.56.113 计划1主2从   192.168.56.111 192.168.56.112 192.168.56.1 ...

  5. linux系统防火墙关闭

    临时关闭防火墙 #systemctl  stop  firewalld 永久关闭服务端防火墙 #systemctl  disabled   firewalld getenforce   查询状态 临时 ...

  6. Flask-数据与路由

    数据 图书数据库的地址 # 基地址 http://t.yushu.im # 关键字搜索 http://t.yushu.im/v2/book/search?q={}&start={}&c ...

  7. Linux 用户管理(三)

    一.userdel --delete a user account and related files -r  --remove 删除用户及家目录 二.id --print real and effe ...

  8. 通过composer安装阿里大于接口扩展

    # 安装laravel阿里大鱼服务 composer require iscms/alisms-for-laravel laravel配置 # 注册服务 # 在config\app.php文件中找到P ...

  9. 【Arduino开发板刷Bootloader01】

    其接线方式就是:   Programmer(工具开发板)                Being programmed(目标开发板)                              Vcc ...

  10. python文件打包为exe可执行文件的方法

    我自己常用Pyinstaller库打包 第一步: 安装pyinstaller库   pip install pyinstaller 第二步: 在py文件所在目录输入 mydemo.py是自己写的py文 ...