苹果safari支持flex布局
今天突然发现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布局的更多相关文章
- 让iphone5s 支持 flex 布局
/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;di ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- flex布局笔记整理
flex布局笔记整理 了解-webkit-box 利用postcss进行css代码的向后兼容时,display:flex兼容后的代码常会带有display:-webkit-box. 部分移动端内核较低 ...
- IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1
由于最近项目要嵌入其它平台,所以要做IE11 的兼容,那就用IE11打开网页看一看,一看吓一跳,页脚直接到了页眉的下面,并把主要内容覆盖了,也就是stick footer 布局失效了,我写了一个简易的 ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- 【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- Flex 布局
Flex 布局 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非 ...
- Flex 布局教程:语法篇[转]
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- Flex布局总结
2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能.lex布局将成为未来布局 ...
随机推荐
- cocos2dx lua 打印和保存日志
在2d游戏中,经常会出现闪退或者报错的问题,通过写文本,将日志文件发送给服务端,让后端人员进行分析. 通过lua打印日志在文本文件中: local file = io.open(cc.FileUtil ...
- 重装vs2008遇到的问题
由于前几天办公室电脑dhcp服务挂了,wifi网线都上不了网,很无奈只能重装了系统.于是VS2008也要重装,之前一直用的都是前一个同事留下来的软件,没自己装过,自己装的时候踩了坑,记录一下. 重装了 ...
- 【概率dp 高斯消元】bzoj3270: 博物馆
一类成环概率dp的操作模式 Description 有一天Petya和他的朋友Vasya在进行他们众多旅行中的一次旅行,他们决定去参观一座城堡博物馆.这座博物馆有着特别的样式.它包含由m条走廊连接的n ...
- LeetCode935
问题:935. 骑士拨号器 国际象棋中的骑士可以按下图所示进行移动: . 这一次,我们将 “骑士” 放在电话拨号盘的任意数字键(如上图所示)上,接下来,骑士将会跳 N-1 步. ...
- Python分布式爬虫开发搜索引擎 Scrapy实战视频教程
点击了解更多Python课程>>> Python分布式爬虫开发搜索引擎 Scrapy实战视频教程 课程目录 |--第01集 教程推介 98.23MB |--第02集 windows下 ...
- Linux 用户管理(三)
一.userdel --delete a user account and related files -r --remove 删除用户及家目录 二.id --print real and effe ...
- Applied Nonparametric Statistics-lec5
今天继续two-sample test Ref: https://onlinecourses.science.psu.edu/stat464/print/book/export/html/6 Mann ...
- HDU 1561 The more, The Better(树形背包)
The more, The Better Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- dotnet core 运行程序注意事项
.net core 程序 debug版本无法直接运行,因为没有相关的dll,只有在进入项目文件夹那一层,执行 dotnet run 来运行,会自动链接 当前用户的个人文件夹下的 .nuget/.pac ...
- Selenium WebDriver-操作下拉框内容
操作下拉框中的内容 #encoding=utf-8 import unittest import time import chardet from selenium import webdriver ...