flex兼容性写法

父元素:{

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+ */

}

子元素:{

 -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+ */

}

注意：如果子元素是a或者span之类的行内元素，记得给子元素添加display:block属性；另外请格外注意，grunt无法编译display: box属性，请使用“~”让grunt跳过此属性。

时间： 2024-10-14 11:55:24

flex兼容性写法的相关文章

透明度兼容性写法

透明度兼容性写法: 低版本IE: 1 filter:alpha(opacity:80); 其他标准浏览器(ff chrome 高版本IE) 1 opacity:0.8;

js-事件1_获取鼠标坐标clientX+scrollLeft及兼容性写法_跟随鼠标移动的divs

一.获取鼠标坐标 clientX:鼠标到可视区边缘的距离: scrollLeft:滚动条到页面顶端的距离(不可视区的距离) 兼容性写法: var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 跟随鼠标移动的divs,

CSS浏览器兼容性写法小结

CSS浏览器兼容性写法小结 * , ie6,ie7可以识别: _和- , ie6可以识别: !important ,表示高优先级,ie7及以上,firefox都支持,ie6认识带!important的样式属性,但不认识!important的优先级: -webkit- ,针对safari,chrome浏览器的内核CSS写法 -moz-,针对firefox浏览器的内核CSS写法 -ms-,针对ie内核的CSS写法 -o-,针对Opera内核的CSS写法

常用原生JS方法总结（兼容性写法）

①添加事件方法 1 2 3 4 5 6 7 8 9 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(type, handler, false); }else if (element.attachEvent){//检测是否为IE级方法 element.attachEvent("

Javascript selection的兼容性写法介绍

本文为大家讲解下Javascript selection的兼容性写法,感兴趣的朋友可以参考下 function getSelectedText() { //this function code is borrowed from: http://www.codetoad.com/javascript_get_selected_text.asp var txt = ""; if (window.getSelection) { txt = window.getSelection(); } e

JavaScript数组方法的兼容性写法汇总：indexOf()、forEach()、map()、filter()、some()、every()

ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实非常好用.在过去,我会为了兼容性尽量不用这些方法.但是,总不能为了旧的丢了新的吧?!虽然说jQuery已经集成好了不少语法糖,但jQuery体积太庞大,作为一名志于体面的前端儿得知道原生的兼容性写法要怎么写.于是这几天,我开始在琢磨这些方法的兼容性写法.其实并不难,就是以前不够自信不敢写.写完以后,

访问关系兼容性写法

在IE678不支持previousElementSibling和nextElementSibling: 在IE678支持 previousSibling和nextSibling: 兼容性写法: var pre=div.previousElementSibling||div.previousSibling; var next=div.nextElementSibling||div.nextSibling; 在IE678不支持firstElementChild和lastElementChild:

Event对象跨浏览器兼容性写法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

flex和box兼容性写法

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE