前面的话
对于前端工程师来说，不想面对又不得不面对的一个问题就是兼容性。在几年之前，处理兼容性，一般地就是处理IE低版本浏览器的兼容性。而近几年，随着移动端的发展，工程师也需要注意手机兼容性了。本文将详细介绍CSS兼容性
盒模型属性
【宽高width/height】
(全兼容)widthheight(IE6-不支持)min-widthmax-widthmin-heightmax-height
【内边距padding】
padding
【边框border】
(全兼容)borderborder-widthborder-colorborder-style(IE8-不支持)border-radius(IE10-不支持)border-imageborder-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat(只有firefox支持，需要添加-moz-前缀)border-colors
【外边距margin】
(全兼容)margin(IE不支持，且需要添加webkit或moz前缀)margin-startmargin-end(只有chrome和safari支持，且需要添加webkit前缀)-webkit-margin-before-webkit-margin-after
【轮廓outline】
(IE7-不支持)outlineoutline-widthoutline-coloroutline-style(IE不支持)outline-offset
【box-sizing】
[注意]只有firefox支持padding-box属性值
(IE7-不支持)box-sizing
布局类属性
【display】
[注意]IE7-浏览器不支持table类属性值
(全兼容) display
【浮动】
(全兼容)floatclear
【定位】
[注意]IE6-不支持固定定位position:fixed
(全兼容)positionleftrighttopbottomz-index
【溢出相关】
(全兼容)overflow overflow-x overflow-y clip visibility (IE不支持) resize
【flex】
(IE9-不支持)flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentalign-selfflex-basisflex-growflex-shrinkflexorder
【多列布局】
(IE10+和chrome浏览器支持标准写法，firefox、safari浏览器及移动端android、IOS需要添加前缀)column-widthcolumn-countcolumn-gapcolumn-rulecolumn-span(firefox不支持该属性)columns(只有firefox支持带前缀的column-fill属性)column-fill
【grid】
(IE9-不支持，IE10+需要添加-ms-前缀，android4.4.4-不支持，IOS10.2-不支持)grid-template-rowsgrid-template-columnsgrid-template-areasgrid-column-gapgrid-row-gapgrid-gapgrid-row-startgrid-row-endgrid-rowgrid-column-startgrid-column-endgrid-columngrid-areagrid-auto-flowgrid-auto-rowsgrid-auto-columnsjustify-itemsjustify-selfalign-itemsalign-self
文本类属性
【字体font】
(全兼容)fontfont-familyfont-sizefont-stylefont-variantfont-weightline-height@font-face
【首行缩进text-indent】
(全兼容)text-indent
【对齐】
[注意]IE7-浏览器中vertical-align的百分比值不支持小数行高
(全兼容)text-alignvertical-align (safari浏览器、IOS、androis4.4-浏览器不支持) text-align-last
【间隔】
(全兼容)word-spacingletter-spacing
【大小写text-transform】
(全兼容)text-transform
【划线text-decoration】
(全兼容)text-decoration
【空白符white-space】
[注意]IE7-浏览器不支持pre-line和pre-wrap这两个属性值
(全兼容)white-space
【换行】
[注意1]W3C建议使用overflow-wrap替换word-wrap
[注意2]移动端目前基本都不支持word-break的属性值keep-all
(全兼容)word-wrap word-break(IE不支持)overflow-wrap
【文本方向】
(全兼容)directionunicode-bidi (safari和移动端IOS和android需要添加-webkit-前缀；IE浏览器只支持自己的私有属性值)writing-mode
【文本溢出text-overflow】
(全兼容)text-overflow
【文本阴影text-shadow】
(IE9-不支持)text-shadow
修饰类属性
【背景background】
(全兼容)backgroundbackground-colorbackground-imagebackground-repeatbackground-position(IE8-不支持)background-attachmentbackground-clipbackground-size
【前景和透明度】
(全兼容)color(IE8-不支持)opacity
【颜色模式】
[注意]IE7-不支持color:transparent，但支持background-color: transparent和border-color: transparent
(全兼容)命名颜色16进制 RGB (IE8-不支持)currentColor RGBA HSL HSLA
【光标cursor】
[注意]IE7-不支持拓展样式
(全兼容)cursor
【过渡transition】
(IE9-不支持，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀)transition-propertytransition-durationtransiton-timing-functiontransition-delaytransition
【变形transform】
(IE9-不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀)transformtransform-origin transform-styleperspectiveperspective-originbackface-visibility
【渐变gradient】
IE9-不支持，safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变，且需要添加-webkit-；safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变，且需要添加-webkit-
【动画animation】
(IE9-不支持；safari4-8、IOS3.2-8.4、android2.1-4.4.4需要添加-webkit-前缀)animationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode
【混合模式】
(IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀)mix-blend-modebackground-blend-modeisolation
【滤镜filter】
(IE浏览器及android4.3-浏览器不支持，android4.4+需要添加-webkit-前缀)filter
【倒影box-reflect】
只有chrome和safari浏览器支持，且需要添加-webkit-前缀
【will-change】
(IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+)will-change
其他类属性
【表格】
(全兼容)border-collapsetable-layoutcaption-side(IE7-不支持)border-spacingempty-cells
【分页】
(全兼容)page-break-afterpage-break-beforepage-break-inside(IE7-不支持)orphans(IE及手机端不支持)windows
【选择器】
(全兼容)通配选择器 *元素选择器 div类选择器 .boxID选择器 #box后代选择器 div a分组选择器 h1,p(IE6-不支持)属性选择器 h1[class]子元素选择器 ul > li相邻兄弟选择器 div + p(IE7-不支持)通用兄弟选择器 div ~ p
【伪类】
【伪元素】
(只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持):first-letter:first-line(IE7-不支持):before:after(IE8-不支持)::selection
【关键字】
(IE7-浏览器不支持)inherit(IE浏览器不支持)initial(IE不支持，safari9-不支持，ios9.2-不支持，android4.4.4-不支持)unsetall(只有safari9.1+和ios9.3+支持)revert
【calc】
[注意]android4.4-4.4.4只支持加法和减法。IE9不支持用于backround-position
(IE8-、safari5.1-、ios5.1-、android4.3-不支持)calc
【单位】
(全兼容)pxincmmmqptpcemexch(IE8-不支持)rem(IE8-浏览器不支持，IOS7.1-不支持，android4.3-不支持，对于vmax所有IE浏览器都不支持)vhvwvminvmax