苹果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布局将成为未来布局 ...
随机推荐
- iOS 打印系统字体
NSArray * array = [UIFont familyNames]; for( NSString *familyName in array ){ printf( "Family: ...
- java工作环境配置jdk,idea
下载 jdk 1.8 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 配置环境 ...
- mysql数据库使用mybatis 插入数据时返回主键
为了体现题目,特指的是mysql,先贴上代码: <insert id="saveBizProdOrderDetail" useGeneratedKeys="true ...
- hive sql 学习笔记
1.coalesce 语法: COALESCE ( expression [ ,...n ] ) 参数: expression 任何类型的表达式. 返回类型: 返回数据类型优先级最高的 express ...
- 如何用纯 CSS 创作一台拍立得照相机
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YjYgey 可交互视频 此视频是可 ...
- DeepFaceLab小白入门(6):脸部替换以及合成视频!
前面的都是准备工作,这个环节才是真的换脸.换脸主要分两部分,1,图片换脸,2,把图片合成视频. 7) convert H64 debug.bat 这个环节是和训练环节相对于的,比如我们之前选的是H64 ...
- java/jsp执行sql语句的方式
首先给出sql驱动包 引入sql包 import java.sql.*;//java <%@ page import="java.sql.*"%>//jsp 连接mys ...
- python数据类型之元组(tuple)
元组是python的基础类型之一,是有序的. 元组是不可变的,一旦创建便不能再修改,所以叫只读列表. name = ('alex', 'jack') name[0] = 'mark' # TypeEr ...
- nrf开发笔记一开发软件
nrf52810 的开发环境,比较主流的可以使用keil,iar亦可.sdk中,使用的是pca10040e,s112.虽然开发板共用一个型号(pca10040) keil5中,cmsis 需要4.5. ...
- ARM CORTEX-M3的时钟
转载自:http://www.cnblogs.com/javado/p/7704579.html 这几天写了一段测试代码,跑在LPC812上面. 很吃惊的发现CPU速度为1M 时钟 串口为12M时钟 ...