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) //因此 ...
随机推荐
- 表单中method="post"什么意思?
表示表单中的数据以"post"方法传递.Form提供了两种数据传输的方式——get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的 ...
- python 使用正则表达式的爬虫
下面我们一起尝试一下爬取内涵段子网站: http://www.neihan8.com/article/list_5_1.html 打开之后,不难看到里面一个一个灰常有内涵的段子,当你进行翻页的时候,注 ...
- Mysql事务-隔离级别
MYSQL事务-隔离级别 事务是什么? 事务简言之就是一组SQL执行要么全部成功,要么全部失败.MYSQL的事务在存储引擎层实现. 事务都有ACID特性: 原子性(Atomicity):一个事务必须被 ...
- Android Studio使用心得 - 常见问题集锦
FBI Warning:欢迎转载,但请标明出处:http://blog.csdn.net/codezjx/article/details/38669939,未经本人允许请勿用于商业用途,感谢支持! 整 ...
- inner join和out join的区别
inner join(又叫join) out join包括left join,right join和full join(也就是left+right)
- Grafana-----Singlestat Panel
singlestat面板允许你显示a SINGLE series的主要的汇总统计的一系列.它将series 简化为单个数(通过查看序列中的最大值.最小值.平均值或总和).singlestat还提供阈值 ...
- String研究
=======================String=================================== String里的==和equalsJava String “equal ...
- pmd 使用笔记
pmd是一块开源的代码静态分析工具,使用java编写,可以自定义规则来进行自己想要的分析.pmd可以单独使用,也可以作为idea.eclipse的插件使用.它的规则分为xpath规则,和java规则. ...
- 目标是:互联网方向的Java开发工程师
我们需要这样完美的你: --师出名门:应届统招本科及以上学历,计算机相关专业: --技艺超群:熟悉JAVA面向对象编程, J2EE体系结构,熟悉Struts2.Spring.Ibtais.Memcac ...
- Linux中接收键盘输入
read 选项 变量名 -p "提示信息" -t 指定等待时间,不指定则一直等待 -n 指定接收的字符数,不指定则不限制 -s 隐藏输入的数据,适用于机密 ...