(持续更新)浏览器兼容性总结—之前端开发常用属性及api
2021-02-12 22:18
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;
标准写法:
#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及以上全支持
下一篇:从拳皇97中浅谈C#委托与事件
文章标题:(持续更新)浏览器兼容性总结—之前端开发常用属性及api
文章链接:http://soscw.com/index.php/essay/54641.html