今天突然发现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. Web前端 优化方案

    1.减少Http请求  在一个页面中图片,CSS,JS可能N个,如果每个资源都去请求一次服务器的话,那么服务器就会为每个资源开一个线程来完成,这样的话对服务器的压力就很大了.所以解决的方法就是合并资源 ...

  2. 01_7_cookies

    01_7_cookies 1. cookies 1.1服务器可以向客户端写内容 1.2只能是文本内容 1.3客户端可以阻止服务器写入 1.4只能拿到自己webapp写入的东西 1.5Cookie分为两 ...

  3. 作业题:闰年 if((year%4==0&&year%100!=0)||year&400==0)

    作业题:闰年 if((year%4==0&&year%100!=0)||year&400==0)

  4. 接口的定义——默认加public abstract默认全局常量;与继承不同,子类可以同时实现多个接口;抽象类实现接口;接口继承接口

    一. 接口的定义 接口中定义的方法,全部都为抽象方法,默认加public abstract 接口中定义的变量,全部为全局常量,默认加public static final 二.与继承不同,子类可以同时 ...

  5. python class 巩固

    class 类定义 语法格式如下: class ClassName: <statement-1> ... <statement-N> 类属性与方法 属性 操作属性 getatt ...

  6. (71)Received empty response from Zabbix Agent问题解决

    刚接触zabbix新手少部分会出现如下错误: Received empty response from Zabbix Agent at [192.168.1.2]. Assuming that age ...

  7. Linux基础学习-NFS网络文件系统实时文件共享

    NFS网络文件系统 如果大家觉得Samba服务程序的配置太麻烦了,那么你共享文件的主机都是Linux系统,那么推荐大家在客户端部署nfs服务来共享文件.nfs(网络文件系统)服务可以将远程Linux系 ...

  8. python入门:if和else的基本用法

    #!/usr/bin/env python # -*- coding:utf-8 -*- #2.X用raw_input,3.X用input #if和else的基本用法 name = input(&qu ...

  9. 【TCP/IP】【网络基础】网页访问流程

    引用自 <鸟哥的linux私房菜> http://cn.linux.vbird.org/linux_server/0110network_basic_1.php#ps7 那 TCP/IP ...

  10. IOC容器和Bean的配置

     IOC容器和Bean的配置   1        IOC和DI ①IOC(Inversion of Control):反转控制. 在应用程序中的组件需要获取资源时,传统的方式是组件主动的从容器中获取 ...