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

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

感谢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. cocos2dx lua 打印和保存日志

    在2d游戏中,经常会出现闪退或者报错的问题,通过写文本,将日志文件发送给服务端,让后端人员进行分析. 通过lua打印日志在文本文件中: local file = io.open(cc.FileUtil ...

  2. 重装vs2008遇到的问题

    由于前几天办公室电脑dhcp服务挂了,wifi网线都上不了网,很无奈只能重装了系统.于是VS2008也要重装,之前一直用的都是前一个同事留下来的软件,没自己装过,自己装的时候踩了坑,记录一下. 重装了 ...

  3. 【概率dp 高斯消元】bzoj3270: 博物馆

    一类成环概率dp的操作模式 Description 有一天Petya和他的朋友Vasya在进行他们众多旅行中的一次旅行,他们决定去参观一座城堡博物馆.这座博物馆有着特别的样式.它包含由m条走廊连接的n ...

  4. LeetCode935

    问题:935. 骑士拨号器 国际象棋中的骑士可以按下图所示进行移动:  .            这一次,我们将 “骑士” 放在电话拨号盘的任意数字键(如上图所示)上,接下来,骑士将会跳 N-1 步. ...

  5. Python分布式爬虫开发搜索引擎 Scrapy实战视频教程

    点击了解更多Python课程>>> Python分布式爬虫开发搜索引擎 Scrapy实战视频教程 课程目录 |--第01集 教程推介 98.23MB |--第02集 windows下 ...

  6. Linux 用户管理(三)

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

  7. Applied Nonparametric Statistics-lec5

    今天继续two-sample test Ref: https://onlinecourses.science.psu.edu/stat464/print/book/export/html/6 Mann ...

  8. HDU 1561 The more, The Better(树形背包)

    The more, The Better Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  9. dotnet core 运行程序注意事项

    .net core 程序 debug版本无法直接运行,因为没有相关的dll,只有在进入项目文件夹那一层,执行 dotnet run 来运行,会自动链接 当前用户的个人文件夹下的 .nuget/.pac ...

  10. Selenium WebDriver-操作下拉框内容

    操作下拉框中的内容 #encoding=utf-8 import unittest import time import chardet from selenium import webdriver ...