苹果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布局将成为未来布局 ...
随机推荐
- Web前端 优化方案
1.减少Http请求 在一个页面中图片,CSS,JS可能N个,如果每个资源都去请求一次服务器的话,那么服务器就会为每个资源开一个线程来完成,这样的话对服务器的压力就很大了.所以解决的方法就是合并资源 ...
- 01_7_cookies
01_7_cookies 1. cookies 1.1服务器可以向客户端写内容 1.2只能是文本内容 1.3客户端可以阻止服务器写入 1.4只能拿到自己webapp写入的东西 1.5Cookie分为两 ...
- 作业题:闰年 if((year%4==0&&year%100!=0)||year&400==0)
作业题:闰年 if((year%4==0&&year%100!=0)||year&400==0)
- 接口的定义——默认加public abstract默认全局常量;与继承不同,子类可以同时实现多个接口;抽象类实现接口;接口继承接口
一. 接口的定义 接口中定义的方法,全部都为抽象方法,默认加public abstract 接口中定义的变量,全部为全局常量,默认加public static final 二.与继承不同,子类可以同时 ...
- python class 巩固
class 类定义 语法格式如下: class ClassName: <statement-1> ... <statement-N> 类属性与方法 属性 操作属性 getatt ...
- (71)Received empty response from Zabbix Agent问题解决
刚接触zabbix新手少部分会出现如下错误: Received empty response from Zabbix Agent at [192.168.1.2]. Assuming that age ...
- Linux基础学习-NFS网络文件系统实时文件共享
NFS网络文件系统 如果大家觉得Samba服务程序的配置太麻烦了,那么你共享文件的主机都是Linux系统,那么推荐大家在客户端部署nfs服务来共享文件.nfs(网络文件系统)服务可以将远程Linux系 ...
- python入门:if和else的基本用法
#!/usr/bin/env python # -*- coding:utf-8 -*- #2.X用raw_input,3.X用input #if和else的基本用法 name = input(&qu ...
- 【TCP/IP】【网络基础】网页访问流程
引用自 <鸟哥的linux私房菜> http://cn.linux.vbird.org/linux_server/0110network_basic_1.php#ps7 那 TCP/IP ...
- IOC容器和Bean的配置
IOC容器和Bean的配置 1 IOC和DI ①IOC(Inversion of Control):反转控制. 在应用程序中的组件需要获取资源时,传统的方式是组件主动的从容器中获取 ...