CSS:flex布局浏览器兼容处理 ie8, ie9

浏览器兼容性

关于flex的W3C规范：http://dev.w3.org/csswg/css-flexbox-1/

浏览器兼容性可以参考CanIUse：http://caniuse.com/#feat=flexbox

根据CanIUse的数据可以总结如下：

IE10部分支持2012，需要-ms-前缀

Android4.1/4.2-4.3部分支持2009，需要-webkit-前缀

Safari7/7.1/8部分支持2012，需要-webkit-前缀

IOS Safari7.0-7.1/8.1-8.3部分支持2012，需要-webkit-前缀

所以需要考虑新版本2012：http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/

而Android需要考虑旧版本2009：http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

浏览器兼容的flex语法

/* 子元素-平均分栏 */
.flex1 {-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */-moz-box-flex: 1;         /* OLD - Firefox 19- */width: 20%;               /* For old syntax, otherwise collapses. */-webkit-flex: 1;          /* Chrome */-ms-flex: 1;              /* IE 10 */flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* 父元素-横向排列（主轴） */
.flex-h {display: box;              /* OLD - Android 4.4- */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+ *//* 09版 */-webkit-box-orient: horizontal;/* 12版 */-webkit-flex-direction: row;-moz-flex-direction: row;-ms-flex-direction: row;-o-flex-direction: row;flex-direction: row;
}
/* 父元素-横向换行 */
.flex-hw {/* 09版 *//*-webkit-box-lines: multiple;*//* 12版 */-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;flex-wrap: wrap;
}
/* 父元素-水平居中（主轴是横向才生效） */
.flex-hc {/* 09版 */-webkit-box-pack: center;/* 12版 */-webkit-justify-content: center;-moz-justify-content: center;-ms-justify-content: center;-o-justify-content: center;justify-content: center;/* 其它取值如下：align-items     主轴原点方向对齐flex-end        主轴延伸方向对齐space-between   等间距排列，首尾不留白space-around    等间距排列，首尾留白*/
}
/* 父元素-纵向排列（主轴） */
.flex-v {display: box;              /* OLD - Android 4.4- */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+ *//* 09版 */-webkit-box-orient: vertical;/* 12版 */-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;-o-flex-direction: column;flex-direction: column;
}
/* 父元素-纵向换行 */
.flex-vw {/* 09版 *//*-webkit-box-lines: multiple;*//* 12版 */-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;flex-wrap: wrap;
}
/* 父元素-竖直居中（主轴是横向才生效） */
.flex-vc {/* 09版 */-webkit-box-align: center;/* 12版 */-webkit-align-items: center;-moz-align-items: center;-ms-align-items: center;-o-align-items: center;align-items: center;
}
/* 子元素-显示在从左向右（从上向下）第1个位置，用于改变源文档顺序显示 */
.flex-1 {-webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */-moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */-ms-flex-order: 1;              /* TWEENER - IE 10 */-webkit-order: 1;               /* NEW - Chrome */order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* 子元素-显示在从左向右（从上向下）第2个位置，用于改变源文档顺序显示 */
.flex-2 {-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */-moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */-ms-flex-order: 2;              /* TWEENER - IE 10 */-webkit-order: 2;               /* NEW - Chrome */order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

CSS:flex布局浏览器兼容处理 ie8, ie9相关推荐

css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
html实现左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言小伙伴们是否还记得,之前小编也发布了几篇关于CS ...
CSS常见的浏览器兼容汇总
CSS常见的浏览器兼容汇总一.从浏览器内核的角度来看,浏览器兼容性问题可分为以下三类: 1.渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2.脚本相关:和脚本相关的问题,包括JavaSc ...
css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
css flex布局模型（CSS justify-content 属性） - 代码案例
css flex布局模型(CSS justify-content 属性) - 代码案例效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
css对各个浏览器兼容技巧
CSS HACK技巧关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK HACK ...
网站变灰CSS，多浏览器兼容版本
网站变灰CSS,多浏览器兼容版本: <style> body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: g ...
[css] flex布局的缺点有哪些？（除兼容性外）
[css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目 ...
html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...

CSS:flex布局浏览器兼容处理 ie8, ie9

CSS:flex布局浏览器兼容处理 ie8, ie9相关推荐

最新文章

热门文章