精华内容
下载资源
问答
  • 绑定事件 代码如下: var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj[“e”+type+fn] = fn;...
  • 在网页布局过程中经常会出现在这个浏览器预览正常,到其他的浏览器预览就不正常,很是疑惑,于是整理了一些ie6~ie9 hack兼容写法,需要的朋友可以参考下
  • flex兼容写法

    2020-04-29 23:22:09
    前端开发的时候用flex布局会非常方便,但是flex本身存在兼容问题(虽然一直没遇到过这一...下面整理了我个人常用的几个css属性的兼容写法,整理自Flex布局兼容性,想要其他属性或更详细讲解的可以进原博阅读 .f...
    • 前端开发的时候用flex布局会非常方便,但是flex本身存在兼容问题(虽然一直没遇到过这一问题。。。)
    • 直接在css文件中用flex兼容性写法会使得整个css特别长,开发和阅读很不方便,可以将flex兼容性写法单独保存为一个css文件,引入在html中再调用class即可
    • 下面整理了我个人常用的几个css属性的兼容性写法,整理自Flex布局兼容性,想要其他属性或更详细讲解的可以进原博阅读
    .flex {
    	display: -webkit-box;  /* 老版本语法: Safari 3.1-6,  iOS 6-, Android browser, older WebKit browsers.  */
    	display: -moz-box;    /* 老版本语法: Firefox 19- (buggy but mostly works) */
    	display: -ms-flexbox;  /* 混合版本语法: IE 10 */
    	display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    	display: flex;       /* 新版本语法: Opera 12.1, Firefox 22+ */
    }
    .flex-v {
     	/***兼容性写法***/
      -moz-box-orient:vertical; /* Firefox */
      -webkit-box-orient:vertical; /* Safari、Opera 以及 Chrome */
      box-orient:vertical;
    	-ms-flex-direction: column;
      -webkit-flex-direction: column; /* Safari */
      flex-direction: column;
    }
    .flex-align-center {
      /*老版本语法*/
      -webkit-box-align: center;
      -moz-box-align: center;
      /*混合版本语法*/
      -ms-flex-align: center;
      /*新版本语法*/
      -webkit-align-items: center; /* Safari */
      align-items: center;
    }
    .flex-align-start {
     	/*老版本语法*/
      -webkit-box-align: start;
      -moz-box-align: start;
      /*混合版本语法*/
      -ms-flex-align: start;
      /*新版本语法*/
      -webkit-align-items: flex-start; /* Safari */
      align-items: flex-start;
    }
    .flex-align-end {
    	 /*老版本语法*/
      -webkit-box-align: end;
      -moz-box-align: end;
      /*混合版本语法*/
      -ms-flex-align: end;
      /*新版本语法*/
      -webkit-align-items: flex-end; /* Safari */
      align-items: flex-end;
    }
    .flex-pack-center {
      /*老版本语法*/
      -webkit-box-pack: center;
      -moz-box-pack: center;
      /*混合版本语法*/
      -ms-flex-pack: center;
      /*新版本语法*/
      -webkit-justify-content: center; /* Safari */
      justify-content: center;   
    }
    .flex-pack-justify {
      /*老版本语法*/
    	-webkit-box-pack: justify;
    	-moz-box-pack: justify;
    	/*混合版本语法*/
    	-ms-flex-pack: justify;
    	/*新版本语法*/
    	-webkit-justify-content: space-between; /* Safari */
    	justify-content: space-between;
    }
    .flex-pack-distribute {
      /*混合版本语法*/
      -ms-flex-pack: distribute;
      /*新版本语法*/
      -webkit-justify-content: space-around; /* Safari */
      justify-content: space-around;
    }
    .flex-pack-start {
    	/*老版本语法*/
      -webkit-box-pack: start;
      -moz-box-pack: start;
      /*混合版本语法*/
      -ms-flex-pack: start;
      /*新版本语法*/
      -webkit-justify-content: flex-start; /* Safari */
      justify-content: flex-start;
    }
    .flex-pack-end {
    	/*老版本语法*/
      -webkit-box-pack: end;
      -moz-box-pack: end;
      /*混合版本语法*/
      -ms-flex-pack: end;
      /*新版本语法*/
      -webkit-justify-content: flex-end; /* Safari */
      justify-content: flex-end;
    }
    

    将全部代码存为一个css文件引入html文件即可
    flex兼容写法到这里就结束了,有错误欢迎指出,后面内容是怕忘记了顺带记录一下

    其他个人习惯

    • 下面的css可以去掉页面多余白边和使用百分比
    html,body{
    	height: 100%;
    	width: 100%;
    	margin: 0;
    	min-width: (最小宽度);
    }
    
    • 下面在上面的基础上可以避免页面文字被选中
    html,body{
    	height: 100%;
    	width: 100%;
    	margin: 0;
    	min-width: (最小宽度);
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    }
    
    • 在body标签加上下面的代码防止页面图片被鼠标拖动的尴尬
    <body ondragstart="return false">
    
    展开全文
  • flex弹性布局兼容写法

    2019-03-26 11:27:34
    在网上找了下flex布局的各种兼容写法,特此记录下 原文地址: 弹性布局各种坑爹兼容   display:flex的兼容写法 display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -weblit-...

    今天在写h5活动的时候,使用到了flex布局,在chrome浏览器手机模式下测试一切ok,然后使用真机(iphone 5c)时,就发现了各种问题?

    在网上找了下flex布局的各种兼容写法,特此记录下

    原文地址:弹性布局各种坑爹兼容

     

    display:flex的兼容写法

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -weblit-flex;
    display: flex;

    定义子元素换行flex-firection的兼容性写法

    -webkit-box-orient: verical;
    -webkit-box-direction: normal;
    -moz-box-orient: verical;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    
    用box-orient:horizontal+box-direction:normal/reverse可以达到flex-direction:row/row-reverse效果
    用box-orient:vertical+box-direction:normal/reverse可以达到flex-direction:column/column-reverse效果

    定义子元素换行flex-wrap的兼容性写法

    -webkit-flex-wrap: wrap;
    -webkit-box-lines: multiple;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;

    flex-flow: flex-direction flex-wrap的兼容写法

    -webkit-flex-flow: row wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-lines: multiple;
    -moz-flex-flow: row wrap;
    box-orient: horizontal;
    box-lines: multiple;
    flex-flow: row wrap;

    横向排列布局justify-content的兼容写法

    -webkit-justify-content: center;
    justify-content: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    box-pack: center;

    竖向排列布局align-items的兼容写法

    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;

    伸缩盒子布局的兼容写法

    -webkit-box-flex: num;
    -moz-box-flex: num;
    box-flex: num;
    -webkit-flex: num;
    flex: num;

     

    展开全文
  • css浏览器兼容写法

    2013-06-12 21:19:15
    css浏览器兼容写法 如果只让ie6看见用*html .head{color:#000;} 如果只让ie7看见用*+html .head{color:#000;} 如果只让ff看见用:root body .head{color:#000;} 如果只让ff、IE8看见用html>/**/body .head{color:#000...
  • 各浏览器css兼容写法

    2008-12-03 08:59:58
    各浏览器css兼容写法各浏览器css兼容写法
  • css3 动画事件兼容写法

    千次阅读 2019-04-18 15:21:09
    兼容写法: // prefixer helper function var pfx = [“webkit”, “moz”, “MS”, “o”, “”]; function prefixedEventListener(element, type, callback) { for (var p = 0; p ; p++) { if (!pfx[p]) type...

    css 动画事件
    原文链接:http://caibaojian.com/animationend.html
    No prefix - animationstart, animationiteration, animationend
    Webkit - webkitAnimationStart, webkitAnimationIteration, webkitAnimationEnd
    Mozilla - mozAnimationStart, mozAnimationIteration, mozAnimationEnd
    MS - MSAnimationStart, MSAnimationIteration, MSAnimationEnd
    O – oAnimationStart, oAnimationIteration, oAnimationEnd

    示例:
    // set the var here
    var monkey = document.querySelector("#monkey");

    // listen for animation start
    monkey.addEventListener(“animationstart”,function(e){
    console.log(“log at beginning of monkey animation”);
    },false);

    // listen for animation iteration
    monkey.addEventListener(“animationiteration”,function(e){
    console.log(“log at beginning of each subsequent iteration”);
    },false);

    // listen for animation end
    monkey.addEventListener(“animationend”,function(e){
    console.log(“log at end of monkey animation”);
    },false);

    兼容写法:
    // prefixer helper function
    var pfx = [“webkit”, “moz”, “MS”, “o”, “”];
    function prefixedEventListener(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
    if (!pfx[p]) type = type.toLowerCase();
    element.addEventListener(pfx[p]+type, callback, false);
    }
    }

    // new event listener function
    var monkey = document.querySelector("#monkey");
    prefixedEventListener(monkey,“AnimationStart”,function(e){
    console.log(“log at beginning of monkey animation”);
    });

    展开全文
  • PHP代码的一些兼容写法

    千次阅读 2019-08-28 10:57:38
    1.应用场景 后端代码要包容[但不是不严谨, 也不是不安全],从而使得代码更加地健壮, 前端代码要严格 //默认原则 2.学习/操作 1.... if(isset($json[$field])) { $arr = is_array($json[$field]) ?...

    1.应用场景

    后端代码要包容[但不是不严谨, 也不是不安全],从而使得代码更加地健壮, 前端代码要严格 //默认原则

    2.学习/操作

    1.接受参数 //前端传递或者方法传参

    if(isset($json[$field])) {
        $arr = is_array($json[$field]) ? $json[$field] : [$json[$field]];
    }

     

    2.TBD

     

    后续补充

    ...

    3.问题

    TBD

    4.参考

    TBD

    后续补充

    ...

    展开全文
  • flex 兼容写法

    2018-08-21 08:25:20
    CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水平居中 flex-pack-justify:子元素两端对齐 ...
  • 1、IE浏览器写法: /* 取值范围:1-100 */ filter:alpha(opacity=value); 2、兼容其他浏览器写法 /* value的取值范围: 0-1 */ opacity:0.value;
  • 主要介绍了JS事件添加和移出的兼容写法,结合实例形式分析了javascript针对不同浏览器实现实现添加与移除事件的相关技巧与使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
  • 下面比较了几种浏览器之间的差异,在写javascript代码时 要时刻注意这些差异
  • 为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject : 实例: var xmlhttp; if (window....
  • 本篇文章主要介绍了详解js几个绕不开的事件兼容写法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • CSS calc 兼容写法

    千次阅读 2018-09-13 15:47:08
    width: 98%;/*写给不支持calc()的浏览器*/ width:-moz-calc(100% - 80px); width:-webkit-calc(100% - 80px); width: calc(100% - 80px);
  • 兼容写法: window.event?window.cancelBubble=true:e.stopPropagation() 四、拦截浏览器的默认行为 拦截浏览器自带的一些事件行为,例如:a超链接的跳转等.... 对象.事件名 return false 对象.addEventListener...
  • //js获取窗口宽高的兼容个主流浏览器的写法 var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ ...
  • js监听事件兼容写法

    2019-03-27 16:37:25
    var el= document.getElementById('el'); if(el.addEventListener) { el.addEventListener('click', function() { ...} else if (el.attachEvent){ //兼容ie8 el.attachEvent('onclick', functio...
  • opacity(0—1)css的透明属性在IE8之前的版本有兼容问题; 如何处理: 例如:opacity:0.4; filter:过滤器 filter:alpha(opacity:40) 里面的属性值是相对应的。如上所示0.4相对应的就是40. 0.6——60.
  • display:flex兼容写法

    万次阅读 2019-01-04 10:46:27
    &lt;style type="text/css"&gt; *{margin:0;padding:0} .conbox{ margin:0 auto; width:800px; height:500px; background:#CCCCCC} .list{box-sizing:border-box;width:200px;...bor...
  • js给元素添加多项样式,浏览器全兼容示例写法: 测试3 [removed] var obj=document.getElementById("test"); var oldStyle=obj.style.cssText; alert(oldStyle); obj.style.cssText="border:2px red solid;...
  • [js] 获取浏览器当前页面的滚动条高度的兼容写法 document.documentElement.scrollTop || document.body.scrollTop; 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。 主目录 与...
  • 尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去,偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。
  • 下面是高手整理的一些javascript在ie和ff中的兼容写法
  • -moz代表火狐的内核, -ms代表IE内核, -webkit代表webkit内核,常见是的是谷歌和苹果浏览器。
  • window.event对象差异 IE:有window.event对象 FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event) 获取鼠标当前坐标 IE:event.x和event.y。 FF:event.pageX和event...
  • CSS兼容写法整理

    千次阅读 2016-11-03 14:24:08
    css3(含ie9以下) 1.box-shadow:  filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,.../*兼容ie*/ -moz-box-shadow: 2px 2px 10px #909090;/*兼容firefox*/ -webkit-box-shado
  • 移动端video标签兼容写法

    千次阅读 2020-02-14 11:02:00
    ```javascript { key: 'webkit-playsinline', val: 'true' }, { key: 'playsinline', val: 'tr...
  • obj.onclick = fn1;obj.attachEvent("onclick", fn1); // 此方法IE11, Chrome, FF,已经不支持了,而且fn1中的this指向... //此方法只有IE11, Chrome, FF才有此方法所以兼容写法可以这样写: function bi...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 109,825
精华内容 43,930
关键字:

兼容写法