CSS兼容性的讲解

对于前端工程师来说，不想面对又不得不面对的一个问题就是兼容性。在几年之前，处理兼容性，一般地就是处理IE低版本浏览器的兼容性。而近几年，随着移动端的发展，工程师也需要注意手机兼容性了。本文将详细介绍CSS兼容性

怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。

2.IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。例如：

HTML：

div >

【宽高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

(全兼容)positionrightbottomz-index

【溢出相关】

(全兼容)overflow
overflow-x
overflow-y
clip
visibility

(IE不支持)
resize

【flex】

(IE9-不支持)flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentalign-selfflex-basisflex-growflex-shrinkorder

【多列布局】

(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】

(全兼容)font-familyfont-sizefont-stylefont-variantfont-weightline-height@font-face

【首行缩进text-indent】

(全兼容)text-indent

【对齐】

[注意]IE7-浏览器中vertical-align的百分比值不支持小数行高

--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

--wrap

【文本方向】

-webkit--

【文本溢出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

-

【光标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.-、android2.-.、IOS3.----        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。