今天突然发现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. iOS应用架构谈part4-本地持久化方案及动态部署

    前言 嗯,你们要的大招.跟着这篇文章一起也发布了CTPersistance和CTJSBridge这两个库,希望大家在实际使用的时候如果遇到问题,就给我提issue或者PR或者评论区.每一个issue和 ...

  2. CentOS 编译安装PHP5.6(7以上也通用)

    由于公司有新服务器需要构建一套LNMP平台,且需要编译安装各个部件,所以记录下此文章. 这是安装PHP涉及到的软件包(可以自行决定使用哪个版本): ├── libiconv-1.15.tar.gz ├ ...

  3. NOIP模拟赛 准考证号

    准考证号 128M 0.1s ticket.cpp escription 蒟蒻hzwer NOIP2014惨跪,他依稀记得他的准考证号是37,现在hzwer又将要面临一场比赛,他希望准考证号不出现37 ...

  4. token_get_all()函数

    token_get_all (PHP 4 >= 4.2.0, PHP 5) token_get_all — 将提供的源码按 PHP 标记进行分割,可以用作php源代码的压缩,会按照固定的分解方法 ...

  5. python爬虫用到的一些东西

    原装requests >>> import requests >>> response = requests.get('http://www.baidu.com') ...

  6. 16Shell脚本—计划任务服务程序

    计划任务服务程序 尽管我们现在已近有了功能彪悍的脚本程序来执行一些批处理工作,但是,如果仍然需要每天凌晨两点敲击键盘回车键来执行这个脚本程序,这简直太痛苦了.为此,我们需要学习如何设置服务器的计划任务 ...

  7. Java-JFrame-swing嵌套浏览器步骤

    Java-JFrame-swing嵌套浏览器步骤 一.使用swing嵌套浏览器要实现的功能: 通过java的swing实现在一个窗体中嵌套一个浏览器,可以在这个浏览器中将另一个项目的内容显示出来,只需 ...

  8. Linux 文本编辑常用快捷键

    一.编辑模式 vim有三种编辑模式 1. i 进入文本编辑模式 2. esc 进入命令编辑模式 命令编辑状态下 dd删除整行 3. :进入底行模式 底行模式状态  输入q 退出 w保存  wq 保存并 ...

  9. #pragma与_Pragma(转载)

    C90为预处理指令家族带来一位新成员:#pragma.一般情况下,大家很少见到它.        #pragma的作用是为特定的编译器提供特定的编译指示,这些指示是具体针对某一种(或某一些)编译器的, ...

  10. 【Alpha】Scrum Meeting 5-end

    第一天:2019/6/19 前言: 第5次会议在6月19日由PM在教9C-501召开. 总结项目,进行单元测试并进行简单的整合.时长60min. 团队GitHub仓库 仓库连接 1.1 今日完成任务情 ...