box-flex兼容写法
box-flex布局在这几年发生了多次变化,可分为2009版、2011版以及2013版,
区分:
display:box(inline-box), box-{*}的格式为2009版
display:boxflex(inline-flexbox), flex()为2011版
display:flex(inline-flex), flex()为2013版,也是最新的版本
由此可见兼容写法的复杂。。
三种版本分别由那些浏览器支持呢?
2009: 支持性最广的一版: Chrome、Firefox2+、Safari3.1+(一部分属于部分支持,得加上-webkit、-moz前缀),但IE与opera完全不支持
2011:由IE10部分支持
2013:Chrome21+、Opera(Opera Mobile12.1+和Blackberry10+)
可查看以下兼容图:
2009版本写法
.box {
display: -webkit-box; /*兼容webkit内核浏览器,例如chrome与safari*/
display: -moz-box;/*兼容firefox*/
display: box;
}
.box>div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
注意:
1.flex元素若添加float、position属性,将失去box-flex布局赋予其的宽高等属性
2013写法:
.box {
display: -webkit-flex; /*webkit内核*/
display: flex; /*兼容firefox、opera*/
}
.box >div {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
}
注意:
1.此写法中子元素设置float无效,不影响原布局
为了追求更好地兼容性,我们一般会采用兼容写法
.box {
display: -webkit-box;
display: -moz-box;
display: -ms-boxflex;
display: -webkit-flex;
display: flex;
}
.div >div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
width: 50%;
-webkit-flex: 1;
flex: 1;
}
注意:
新语法中没有必要显式设置宽度(width:50%),但旧语法在部分老旧浏览器上会崩溃,因此最好加上。
兼容写法支持情况:
- Chrome any
- Firefox any
- Safari any
- Opera 12.1+
- IE 10+
- iOS any
- Android any
box-flex兼容写法的更多相关文章
- flex(兼容写法)
CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水 ...
- display:box的兼容写法
.box{ /* display */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; ...
- flex兼容问题
display:flex作为C3的新属性,还是有的浏览器不支持的,那下面我们就来说一下他的兼容写法 .box{ display: -webkit-box; /* 老版本语法: Safari, iOS, ...
- currentStyle和getComputedStyle的兼容写法
今天学习javascript的时候,教程中介绍了一种简单实现jQuery 中css()方法的写法 <!DOCTYPE html> <html lang="en"& ...
- IE浏览器兼容问题(上)——html和css的兼容写法
用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...
- list之flex布局写法
list之flex布局写法 移动端实际场景中经常会遇到将header置顶,然后下面list需要滚动的情况,通常的做法会是将header使用fixed的方式固定到顶部,然后list主体相对于header ...
- JavaScript中的数组遍历forEach()与map()方法以及兼容写法
原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是 ...
- CSS3-border-radius的兼容写法大全
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
随机推荐
- windows中控制台窗口和普通窗口有什么区别?
1. 窗口都是windows标准窗口,有窗口句柄,但是console window没有消息循环,直接从缓冲区读数据,显示数据. windows中普通窗口都有自己的窗口过程, 我可以使用SetWindo ...
- jquery call 函数改变this作用域
call的用法在许多地方都看到过介绍.可以用来改变函数的作用域. 在页面中我们在一个input中添加click事件 <input id="Button1" type=&quo ...
- ssh远程登录+查看系统版本+使用scp命令上传下载
ssh远程登录命令简单实例 ssh命令用于远程登录上Linux主机. 常用格式:ssh [-l login_name] [-p port] [user@]hostname 更详细的可以用ssh ...
- Caffe机器学习框架
Caffe是一个常用的卷积神经网络框架,在视频.图像处理方面应用较多. 官网:http://caffe.berkeleyvision.org/ 演示:http://demo.caffe.berkele ...
- iOS开发常见问题(不断更新)
1.如何从程序退出到桌面 在单击事件中 exit(0);即可. 2.如何强制横屏 在你需要横屏的控制器里加入如下代码 - (BOOL)shouldAutorotate{ return NO; } - ...
- Splitting Pile
Splitting Pile Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement Snuke a ...
- php var_dump()函数的详解
说明:var_dump()方法,判断一个变量的类型与长度,并输出变量的数值,如果变量有值,则输出是变量的值,并返回数据类型.显示关于一个或多个表达式的结构信息,包括表达式的类型与值.数组将递归展开值, ...
- stochastic matrix
w Stochastic matrix - Wikipedia https://en.wikipedia.org/wiki/Stochastic_matrix Suppose you have a ...
- <2013 12 17> 雅思写作、口语相关
这一个多月,参加了两次雅思考试,成绩分别为: Overall:6.5 L:7.0 R:7.5 W:6.0 S:5.5 Overall:7.0 L:7.0 ...
- 【python】-- Django路由系统(网址关系映射)、视图、模板
Django路由系统(网址关系映射).视图.模板 一.路由系统(网址关系映射) 1.单一路由对应: 一个url对应一个视图函数(类) urls.py: url(r'^test', views.test ...