對于前端工程師來說，不想面對又不得不面對的一個問題就是兼容性。在幾年之前，處理兼容性，一般地就是處理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.----        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。