苹果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布局将成为未来布局 ...
随机推荐
- MarkdownPad 2 Pro 注册码
MarkdownPad 2 Pro 注册码 MarkdownPad 是 Windows 平台上一个功能完善的 Markdown 编辑器. 提供了语法高亮和方便的快捷键功能,给您最好的 Markdown ...
- 自行实现一个简易RPC框架
10分钟写一个RPC框架 1.RpcFramework package com.alibaba.study.rpc.framework; import java.io.ObjectInputStrea ...
- 使用xcode 8 调试ios10
这几天更新了ios10,发现真机不能调试,弹出几个错,表示没有证书.用ios9的真机能调试, 真他么坑,总结一下解决方法. 在BuildSetting 的Signing中Code Signing Id ...
- cocos2dx 3.x for lua "异步加载"实现过程
在lua中,cocos2dx 建立的栈只能被一个线程(主线程)访问,如果在c++建立子线程,然后通过c++调用lua回调函数实现异步加载就会报错. 如果试图通过c++子线程直接实现加载资源,返回一个布 ...
- salt 模板
http://www.mamicode.com/info-detail-2297406.html
- 【android】签署应用采用相同证书的用处
在应用的预期生命周期内,您应使用相同证书签署所有 APK 应用升级:当系统安装应用的更新时,它会比较新版本和现有版本中的证书.如果证书匹配,则系统允许更新.如果您使用不同的证书签署新版本,则必须为应用 ...
- Kubernetes的主要功能
Kubernetes的主要功能 1.数据卷 Pod中容器之间共享数据,可以使用数据卷. 2.应用程序健康检查 容器内服务可能进程堵塞无法处理请求,可以设置监控检查策略保证应用健壮性. 3.复制 ...
- python3通过Beautif和XPath分别爬取“小猪短租-北京”租房信息,并对比时间效率(附源代码)
爬虫思路分析: 1. 观察小猪短租(北京)的网页 首页:http://www.xiaozhu.com/?utm_source=baidu&utm_medium=cpc&utm_term ...
- 牛客练习赛22 C 简单瞎搞题
//位运算 // & 都是1 才是 1 // | 都是0 才是0 // ^ 不一样才是1 #include <iostream> #include <cstdio> # ...
- STM8时基单元
STM8时基单元 时基单元包含: 16位向上/向下计数器 16位自动重载寄存器 重复计数器 预分频器 (图29:STM8 时基单元) 16位计数器,预分频器,自动重载寄存器和重复计数器寄存器都可以通过 ...