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

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；
标准写法：
<div class="arrow" id="arrow" onselectstart="return false;">123</div>
#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及以上全支持

 

<!--[if lte IE 9]><![endif]-->条件注释  IE9及以下只支持

 

getElementsByClassName iE9及以上支持

 

forEach()  iE9及以上支持

 

localStorage和sessionStorage ie8及以上支持