(持续更新)浏览器兼容性总结—之前端开发常用属性及api

2021-02-12 22:18

阅读:404

max-width,min-width ie7以上支持

 

rgba 只支持ie9及以上浏览器,ie8要用滤镜处理

 

border-radius 也只支持ie9以上 不需要加前缀

 

box-sizing ie8以上都兼容 但是要加上前缀

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

 

:hover a标签的hover全兼容,其他标签hover 只支持ie9及以上


mouseenter和mouseleve事件 ie全系列支持,目前版本的w3c浏览器也都兼容,一般不需要兼容处理


与鼠标或触摸事件相关的区域,要加上背景属性才会有效,不需要背景时设置rgba透明即可(设置transparent也无效)
background-color: rgba(0,0,0,0);/*设置背景透明,防止ie10及以下点击事件或者其他鼠标事件失效*/

 

伪元素,z-index 全系列兼容

 

透明兼容
filter:alpha(opacity=0);
opacity:0;

classlist属性只支持ie10及以上

 

transtation属性只支持ie10及以上,所以过渡效果不一定有效

@keyframe 规则和 animation 属性只支持ie10及以上

transform :
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。

 

js全屏事件api只支持ie11以上,所以用控制css代替

 

cursor属性ie全支持

 

background-size ie9及以上支持 /*现在的浏览器不需要加前缀了*/


background: linear-gradient(to bottom, #ffffff, #000);/*颜色渐变效果,ie10+*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#000000);/*ie9兼容,只支持上下左右,并且会让元素border-radius失效,解决办法:给父元素设置border-radius,并且overflow: hidden*/


onselectstart 事件,用来禁用文字选中
webkit浏览器:行内加onselectstart="return false;"
firefox 行内或css加-moz-user-select:none;
标准写法:

123

#arrow {
-moz-user-select:none;
}

 

CSS3 @media 查询 支持ie9及以上


getAttribute() 所有浏览器都支持 setAttribute() ie9及以上支持。removeAttribute()所有浏览器都支持
以上都可以操作 自定义属性 和 行内内置属性
.操作符无法获取行内自定义属性,只能获取行内默认属性 ,也只能设置行内默认属性或者js哩dom对象的自定义属性

 

dataset 只支持ie11及以上。

 

addEventListener和removeEventListener,ie9及以上支持

 

firstElementChild获取第一个子元素节点对象,ie9及以上支持


backface-visibility 只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。
Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。


Html5 新语义标签 如header, section, footer, aside, nav, main, article, figure等 IE9及以上全支持


评论


亲,登录后才可以留言!